html+css+js实现的，好玩的，带动画登录注册页面

最新推荐文章于 2023-07-31 21:12:24 发布

bilibuling

最新推荐文章于 2023-07-31 21:12:24 发布

阅读量782

点赞数 5

分类专栏：前端文章标签： css html javascript

本文链接：https://blog.csdn.net/bilibuling/article/details/130210015

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html+css+js实现的好玩的登录注册页面

先看效果：
在这里插入图片描述
login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>带移动动画的登录注册页面</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        a{
            text-decoration: none;
            color: #fff;
            font-size: 20px;
        }
        a:hover{
            color: rgb(237, 214, 214);
        }
        body{
            background-color: rgb(237, 214, 214);
        }
        .box{
            position: relative;
            width: 800px;
            height: 400px;
            margin: 150px auto;
            background-color: #fff;
        }
        .box-login{
            position: relative;
            float: left;
            width: 400px;
            height: 100%;
            border-right: 1px solid #ccc;
            opacity: 1;
        }
        .box-register{
            width: 400px;
            height: 100%;
            float: right;
            opacity: 0;
        }
        h1{
            width: 100%;
            text-align: center;
            margin-top: 30px;
            font-size: 35px;
        }
        input{
            display: block;
            width: 250px;
            height: 30px;
            margin:0 auto;
            margin-bottom: 20px;
            border: 0;
            border-bottom: 1px solid #000;
            outline: none;
        }
        p{
            padding-left: 74px;
            font-size: 15px;
        }
        #user{
            padding-top: 35px;
        }
        button{
            width: 250px;
            height: 35px;
            background-color: rgb(237, 214, 214);
            border: 0;
            margin-left: 75px;
            margin-top: 30px;
            font-size: 15px;
        }
        .box-register input{
            margin-bottom: 10px;
        }
        .cover{
            position: absolute;
            top: -50px;
            right:75px;
            width: 325px;
            height: 500px;
            background-color: rgb(239, 142, 173);
        }
        .cover div{
            width: 100%;
            margin-top: 225px;
        }
        .cover div p{
            display: inline;
            color: #fff;
            font-size: 20px;
        }
        /* 淡入 */
        .fadeIn{
            opacity: 1;
            transition: all 1s;
        }
        /* 淡出 */
        .fadeOut{
            opacity: 0;
            transition: all 1s;
        }
        /* 遮罩层向左移动 */
        .move-left{
            transition: all 1s;
            transform: translateX(-325px);
        }
        /* 遮罩层回到原来的位置 */
        .move-right{
            transition: all 1s;
            transform: translateX(0);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box-login" id="login">
            <h1>login</h1>
            <p id="user">username</p>
            <input type="text" class="username"/>
            <p id="psw">password</p>
            <input type="password" class="password"/>
            <button>login</button>
        </div>
        <div class="box-register" id="register">
            <h1>register</h1>
            <p id="user">username</p>
            <input type="text" class="username"/>
            <p id="psw">password</p>
            <input type="password" class="password"/>
            <p id="phone">phone</p>
            <input type="text" class="phone"/>
            <button>register</button>
        </div>
        <div class="cover" id="cover">
            <div>
                <p id="mes">没有账号？去</p><a href="javascript:;" id="btn">注册</a>
            </div>
        </div>
    </div>
    <script>
        var btn=document.querySelector("#btn");
        var cover=document.querySelector("#cover");
        var mes=document.querySelector("#mes");
        var login=document.querySelector("#login");
        var reg=document.querySelector("#register");
        var flag=0;
        btn.addEventListener('click',function(){
            if(flag==0){
                // 利用增加类名的方式实现动画
                cover.className="cover move-left";
                reg.className="box-register fadeIn";
                login.className="box-login fadeOut";
                mes.innerText="已有账号？去";
                btn.innerText="登录";
                flag=1;
            }else{
                cover.className="cover move-right";
                login.className="box-login fadeIn";
                reg.className="box-register fadeOut";
                mes.innerText="没有账号？去";
                btn.innerText="注册";
                flag=0;
            }
        })
    </script>
</body>
</html>

bilibuling

关注

5
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
html+css+js实现的，好玩的，带动画登录注册页面

html+css+js实现的好玩的登录注册页面先看效果：login.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, i
复制链接

扫一扫