Web简易发光登录框

予我心安A3

已于 2022-04-29 10:35:24 修改

阅读量714

点赞数

分类专栏： web 文章标签： Web简易发光登录框 Web登录框设计登录框网页登录框制作

于 2022-04-27 22:12:36 首次发布

本文链接：https://blog.csdn.net/yuwoxinana3/article/details/124462113

版权

web 专栏收录该内容

3 篇文章 2 订阅

订阅专栏

效果图

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>

予我心安A3

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
1
评论
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><d
复制链接

扫一扫