HTML+JS+CSS综合练习
给大家带来一波干货！！
希望对大家有用
一、 滑动样式
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="default.css">
</head>
<body>
<div class="page">
<div class="panel">
<div class="panel_visible">
<!--注册表单-->
<div class="panel_content">
<h1 class="panel_title"> Sign Up </h1>
<form class="form">
<label class="form_label" for="username">Username</label>
<input class="form_input" type="text" id="username" name="username">
<label class="form_label" for="password">Password</label>
<input class="form_input " type="password" id="password" name="password">
<label class="form_label" for="truename">True Name</label>
<input class="form_input" type="text" id="truename" name="fullname">
<button class="form_btn" type="button" value="Submit">Submit</button>
<button class="form_toggle js-formToggle" type="button">Or, Sign In</button>
</form>
</div>
<!--登录表单-->
<div class="panel_content panel_content-overlay js-panel_content ">
<h1 class="panel_title"> Sign In </h1>
<form class="form">
<label class="form_label" for="usernameIn">Username</label>
<input class="form_input" type="text" id="usernameIn" name="usernameIn">
<label class="form_label" for="passwordIn">Password</label>
<input class="form_input " type="password" id="passwordIn" name="passwordIn">
<button class="form_btn" type="button" value="Submit">Sign In</button>
<br>
<button class="form_toggle js-formToggle" type="button">Or, Sign Up</button>
</form>
</div>
</div>
<div class="panel_back js-imageAnimate">
<img class="panel_img" src="login.jpg" style="width: 235px;height: 457px" />
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
main.js:
var toggleBtns = document.querySelectorAll('.js-formToggle');
for(var i = 0; i < toggleBtns.length; i++){
toggleBtns[i].addEventListener("click",toggleForm);
}
var firstClick = true;
function toggleForm(){
if(!firstClick){
document.querySelector('.js-imageAnimate').classList.toggle("animate");
document.querySelector('.js-imageAnimate').classList.toggle("animateOut");
document.querySelector('.js-panel_content').classList.toggle("animate");
document.querySelector('.js-panel_content').classList.toggle("animateOut");
}
else{
firstClick = false;
document.querySelector('.js-imageAnimate').classList.add("animate");
document.querySelector('.js-panel_content').classList.add("animate");
}
}
default.css：
body, html{
font-family: Ariel, sans-serif;
width:100%;
height:100%;
margin:0;
padding:0;
display:inline-block;
}
.page{
display:flex;
flex-flow:row;
flex-wrap:nowrap;
align-items:center;
justify-content:center;
width:100%;
height:100%;
background-color: #0f95b0;
}
.panel{
display:inline-block;
position:relative;
}
.panel_visible{
position:relative;
overflow: hidden;
}
.panel_title{
margin-top: .5em;
margin-bottom: 1.2em;
}
.panel_content{
padding: 20px;
background-color: white;
z-index:10;
position:relative;
}
.panel_content-overlay{
position:absolute;
top:0;
left:100%;
height:100%;
}
.panel_content.animate{
animation: movePanel 2s forwards ;
}
@keyframes movePanel{
0%, 30%{
transform: translateX(0%);
}
35%, 100%{
transform: translateX(-100%);
}
}
.panel_content.animateOut{
animation: movePanelOut 2s forwards ;
}
@keyframes movePanelOut{
0%, 30%{
transform: translateX(-100%);
}
35%, 100%{
transform: translateX(0%);
}
}
.panel_back{
position:absolute;
z-index:0;
top:50%;
left: 0;
width:110%;
transform: translate(70%,-50%);
}
.panel_back.animate{
animation: move 2s forwards ;
}
@keyframes move{
0%{
transform: translate(70%,-50%);
z-index:0;
}
15%{
transform: translate(140%,-50%);
z-index:10;
}
75%{
transform: translate(-120%,-50%);
z-index:10;
}
100%{
transform: translate(-50%,-50%);
z-index:0;
}
}
.panel_back.animateOut{
transform: translate(-50%,-50%);
animation: moveOut 2s forwards ;
}
@keyframes moveOut{
0%{
transform: translate(-50%,-50%);
z-index:0;
}
15%{
transform: translate(-120%,-50%);
z-index:10;
}
75%{
transform: translate(140%,-50%);
z-index:10;
}
100%{
transform: translate(70%,-50%);
z-index:0;
}
}
.panel_img{
width:100%;
display:block;
}
/* Form */
.form{
box-sizing:border-box;
}
.form_label{
display:block;
color: #3D3D3D;
font-weight: 600;
margin-bottom: 5px;
}
.form_input{
border-radius: 3px;
background-color: #f2f2f2 ;
box-shadow: 0px 2px 2px #D6D6D6;
border:none;
padding: 2%;
margin-bottom: 15px;
width: 250px;
box-sizing:border-box;
position:relative;
}
.form_input:focus{
box-shadow: none;
outline-color: #0f95b0;
}
.form_input::after{
/* TODO: make this after portion work */
content: "