案例一 滑动样式
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%版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/3063.html