[JavaScript知识库] Web简易发光登录框

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Web简易发光登录框 -> 正文阅读

[JavaScript知识库]Web简易发光登录框

效果图

denglu.html文件代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发光登录界面</title>
    <link rel="stylesheet" href="denglu.css" type="text/css">
</head>
<body>
<div id="form1">
    <div id="form2">
        <form  action="" method="post" action="">
            <input id="userid" name="userid" type="text" placeholder="用户名">
            <input id="passwd" name="passwd" type="password" placeholder="密码">
            <input id="login-button" type="button" value="登录" onclick="sclick()" >
        </form>
    </div>
<script>
    function sclick()
    {
        alert('按钮是有用的哦')
    }
</script>
</div>


</body>
</html>

denglu.css文件代码

*
{
    padding: 0;
    margin: 0;
}

body
{
    background-color: #010f1a;
}
#form1
{
    position: absolute;
    left: 60%;
    top:20%;
    width: 30%;
    height: 50%;
    background-color: #00eaff;

    box-shadow:15px 5px 80px  #00eaff;
}

#form2
{
    position: absolute;
    left: 1%;
    right: 1%;
    top:2.5%;
    bottom:2.5%;
    width: 98%;
    height: 95%;
    background-color: #010f1a;

    border-radius: 5%;
    box-shadow:15px 5px 40px -30px #010f1a;
}

#userid
{
    position:absolute;
    left: 20%;
    right: 20%;
    top:20%;
    width: 60%;
    height: 10%;

    box-shadow:0px 0px 10px 6px  #00eaff;
    border: #00eaff;
}

#passwd
{
    position: absolute;
    left: 20%;
    right: 20%;
    top:40%;
    width: 60%;
    height: 10%;
    box-shadow:0px 0px 10px 6px  #00eaff;
    border: #00eaff;
}

#login-button
{
    position: absolute;
    left: 20%;
    right: 20%;
    top:60%;
    width: 60%;
    height: 10%;
    border: #00eaff;
    background-color: #00eaff;
}

补充：让外框每0.5s闪烁一次的js脚本

<script>
    var box1 = document.getElementById('form1');
    var num=0;
    var t1 = setInterval(function() { 
        if(num==0)
        {
            box1.style.backgroundColor = '#00eaff';
            box1.style.boxShadow="15px 5px 80px  #00eaff";

            num=1;
        }
        else if(num==1)
        {
            box1.style.backgroundColor = '#010f1a';
            box1.style.boxShadow="0px 0px 0px #010f1a";
            num=0;
        }
    }, 500)// 每隔0.5秒,1000=1s
</script>