夜雨聆风
注册卡片样式切换css3动画!!附源码!!
效果展示
完整源码
<!DOCTYPE html><htmllang="en" ><head><metacharset="UTF-8"><title>登录注册卡片样式切换css3动画 </title><linkrel="stylesheet"href="css/style.css"rel="stylesheet" /></head><body><divclass="form-structor"><divclass="signup"><h2class="form-title"id="signup"><span>或</span>注册</h2><divclass="form-holder"><inputtype="text"class="input"placeholder="用户名" /><inputtype="email"class="input"placeholder="邮箱" /><inputtype="password"class="input"placeholder="密码" /></div><buttonclass="submit-btn">注册</button></div><divclass="login slide-up"><divclass="center"><h2class="form-title"id="login"><span>或</span>登录</h2><divclass="form-holder"><inputtype="email"class="input"placeholder="邮箱" /><inputtype="password"class="input"placeholder="密码" /></div><buttonclass="submit-btn">登录</button></div></div></div><scriptsrc="js/script.js"></script></body></html>
html, body {position: relative;min-height: 100vh;background-color: #E1E8EE;display: flex;align-items: center;justify-content: center;font-family: "Fira Sans", Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.form-structor {background-color: #222;border-radius: 15px;height: 550px;width: 350px;position: relative;overflow: hidden;}.form-structor::after {content: "";opacity: 0.8;position: absolute;top: 0;right: 0;bottom: 0;left: 0;background-repeat: no-repeat;background-position: left bottom;background-size: 500px;background-image: url("../img/32.jpg");}.form-structor .signup {position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);width: 65%;z-index: 5;-webkit-transition: all 0.3s ease;}.form-structor .signup.slide-up {top: 5%;-webkit-transform: translate(-50%, 0%);-webkit-transition: all 0.3s ease;}.form-structor .signup.slide-up .form-holder, .form-structor .signup.slide-up .submit-btn {opacity: 0;visibility: hidden;}.form-structor .signup.slide-up .form-title {font-size: 1em;cursor: pointer;}.form-structor .signup.slide-up .form-title span {margin-right: 5px;opacity: 1;visibility: visible;-webkit-transition: all 0.3s ease;}.form-structor .signup .form-title {color: #fff;font-size: 1.7em;text-align: center;}.form-structor .signup .form-title span {color: rgba(0, 0, 0, 0.4);opacity: 0;visibility: hidden;-webkit-transition: all 0.3s ease;}.form-structor .signup .form-holder {border-radius: 15px;background-color: #fff;overflow: hidden;margin-top: 50px;opacity: 1;visibility: visible;-webkit-transition: all 0.3s ease;}.form-structor .signup .form-holder .input {border: 0;outline: none;box-shadow: none;display: block;height: 30px;line-height: 30px;padding: 8px 15px;border-bottom: 1px solid #eee;width: 100%;font-size: 12px;}.form-structor .signup .form-holder .input:last-child {border-bottom: 0;}.form-structor .signup .form-holder .input::-webkit-input-placeholder {color: rgba(0, 0, 0, 0.4);}.form-structor .signup .submit-btn {background-color: rgba(0, 0, 0, 0.4);color: rgba(255, 255, 255, 0.7);border: 0;border-radius: 15px;display: block;margin: 15px auto;padding: 15px 45px;width: 100%;font-size: 13px;font-weight: bold;cursor: pointer;opacity: 1;visibility: visible;-webkit-transition: all 0.3s ease;}.form-structor .signup .submit-btn:hover {transition: all 0.3s ease;background-color: rgba(0, 0, 0, 0.8);}.form-structor .login {position: absolute;top: 20%;left: 0;right: 0;bottom: 0;background-color: #fff;z-index: 5;-webkit-transition: all 0.3s ease;}.form-structor .login::before {content: "";position: absolute;left: 50%;top: -20px;-webkit-transform: translate(-50%, 0);background-color: #fff;width: 200%;height: 250px;border-radius: 50%;z-index: 4;-webkit-transition: all 0.3s ease;}.form-structor .login .center {position: absolute;top: calc(50% - 10%);left: 50%;-webkit-transform: translate(-50%, -50%);width: 65%;z-index: 5;-webkit-transition: all 0.3s ease;}.form-structor .login .center .form-title {color: #000;font-size: 1.7em;text-align: center;}.form-structor .login .center .form-title span {color: rgba(0, 0, 0, 0.4);opacity: 0;visibility: hidden;-webkit-transition: all 0.3s ease;}.form-structor .login .center .form-holder {border-radius: 15px;background-color: #fff;border: 1px solid #eee;overflow: hidden;margin-top: 50px;opacity: 1;visibility: visible;-webkit-transition: all 0.3s ease;}.form-structor .login .center .form-holder .input {border: 0;outline: none;box-shadow: none;display: block;height: 30px;line-height: 30px;padding: 8px 15px;border-bottom: 1px solid #eee;width: 100%;font-size: 12px;}.form-structor .login .center .form-holder .input:last-child {border-bottom: 0;}.form-structor .login .center .form-holder .input::-webkit-input-placeholder {color: rgba(0, 0, 0, 0.4);}.form-structor .login .center .submit-btn {background-color: #6B92A4;color: rgba(255, 255, 255, 0.7);border: 0;border-radius: 15px;display: block;margin: 15px auto;padding: 15px 45px;width: 100%;font-size: 13px;font-weight: bold;cursor: pointer;opacity: 1;visibility: visible;-webkit-transition: all 0.3s ease;}.form-structor .login .center .submit-btn:hover {transition: all 0.3s ease;background-color: rgba(0, 0, 0, 0.8);}.form-structor .login.slide-up {top: 90%;-webkit-transition: all 0.3s ease;}.form-structor .login.slide-up .center {top: 10%;-webkit-transform: translate(-50%, 0%);-webkit-transition: all 0.3s ease;}.form-structor .login.slide-up .form-holder, .form-structor .login.slide-up .submit-btn {opacity: 0;visibility: hidden;-webkit-transition: all 0.3s ease;}.form-structor .login.slide-up .form-title {font-size: 1em;margin: 0;padding: 0;cursor: pointer;-webkit-transition: all 0.3s ease;}.form-structor .login.slide-up .form-title span {margin-right: 5px;opacity: 1;visibility: visible;-webkit-transition: all 0.3s ease;}
console.clear();const loginBtn = document.getElementById('login');const signupBtn = document.getElementById('signup');loginBtn.addEventListener('click', (e) => {let parent = e.target.parentNode.parentNode;Array.from(e.target.parentNode.parentNode.classList).find((element) => {if(element !== "slide-up") {parent.classList.add('slide-up')}else{signupBtn.parentNode.classList.add('slide-up')parent.classList.remove('slide-up')}});});signupBtn.addEventListener('click', (e) => {let parent = e.target.parentNode;Array.from(e.target.parentNode.classList).find((element) => {if(element !== "slide-up") {parent.classList.add('slide-up')}else{loginBtn.parentNode.parentNode.classList.add('slide-up')parent.classList.remove('slide-up')}});});