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>