夜雨聆风
创意动画效果登录注册UI页面!附源码!!
效果展示
完整源码
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>创意动画效果登录注册UI页面 </title><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><linkrel="stylesheet"href="./style.css"></head><body><!-- partial:index.partial.html --><!-- svg --><svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"class="svg-leafs"><defs><filterid="a"x="0"y="11.42"width="141.121"height="116.457"filterUnits="userSpaceOnUse"><feOffsetinput="SourceAlpha" /><feGaussianBlurstdDeviation="2"result="b" /><feFloodflood-opacity="0.102" /><feCompositeoperator="in"in2="b" /><feCompositein="SourceGraphic" /></filter><filterid="c"x="21.622"y="0"width="133.642"height="128.93"filterUnits="userSpaceOnUse"><feOffsetinput="SourceAlpha" /><feGaussianBlurstdDeviation="5"result="d" /><feFloodflood-opacity="0.102" /><feCompositeoperator="in"in2="d" /><feCompositein="SourceGraphic" /></filter></defs><gtransform="translate(-744.034 -593.436)"id="leafs"><pathd="M863.5,421.5s8.259,5.707,15.234,25.935"transform="translate(156.156 66.187) rotate(16)"fill="none"stroke="#2f811e"stroke-linecap="round"stroke-width="0.4" /><gtransform="matrix(1, 0, 0, 1, 744.03, 593.44)"filter="url(#a)"><pathd="M902.99,490.315s-43.333-18.667-50.49-50.667,10.49-31.667,10.49-31.667A314.915,314.915,0,0,1,895.5,411c16.5,2.5,69.5,37.5,81,70.5,3.829,10.989,7.49,22.815-7.176,29.815S902.99,490.315,902.99,490.315Z"transform="translate(-844.79 -390.56)"fill="var(--green-3)" /></g><pathd="M863.5,421.5s12.557,3.337,25.522,21.57"transform="translate(355.423 -110.67) rotate(32)"fill="none"stroke="#2c7f1c"stroke-linecap="round"stroke-width="0.4" /><gtransform="matrix(1, 0, 0, 1, 744.03, 593.44)"filter="url(#c)"><pathd="M906.186,482.446A113.239,113.239,0,0,1,885.911,470c-5.977-4.556-11.973-10.782-16.832-16.173-12.146-13.478-10.038-42.395-5.407-45.119s27.019,5.924,27.019,5.924,30.8,14.016,39.021,25.114c16.177,21.847,23.864,43.4,14.867,49.079S908.19,483.261,906.186,482.446Z"transform="translate(-701.6 -564.26) rotate(12.09)"fill="var(--green-4)" /></g></g></svg><!-- /svg --><!-- app --><divclass="app"><!-- leafs --><divclass="leafs"><divclass="leaf leaf--1"><svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"width="155.264"height="145.312"viewBox="0 0 155.264 145.312"><usexlink:href="#leafs" /></svg></div><divclass="leaf leaf--2"><svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"width="155.264"height="145.312"viewBox="0 0 155.264 145.312"><usexlink:href="#leafs" /></svg></div><divclass="leaf leaf--3"><svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"width="155.264"height="145.312"viewBox="0 0 155.264 145.312"><usexlink:href="#leafs" /></svg></div></div><!-- /leafs --><!-- first-screen --><divclass="screen first-screen"><pclass="number">#12</p><h1class="heading">bootstrapMB.</h1><pclass="description">创意的登录注册UI页面，带树叶动画效果，前置页面、登录页面、登录成功页面。</p><buttonclass="btn-circle btn-pTSecond">→</button></div><!-- /first-screen --><!-- second-screen --><divclass="screen second-screen"><buttonclass="btn-circle btn-pTFirst">←</button><h1class="heading">注册</h1><formclass="form"><divclass="form__field"><inputtype="email"class="form__input"placeholder="email"data-info="noor@beautifulnature.com"required></div><divclass="form__field"><!-- Yup! the password is hidden even here... hehe --><inputtype="password"class="form__input"placeholder="password"data-info="********"required></div><buttonclass="btn-words btn-form">创建账号</button><divclass="form__success">成功</div></form><buttonclass="btn-words btn-sign-in">登录</button></div><!-- /second-screen --><!-- third-screen --><divclass="screen third-screen"><h1class="heading">欢迎</h1><pclass="description">账号注册成功，谢谢！</p></div><!-- /third-screen --></div><!-- /app --><!-- cursor --><divclass="custom-cursor"></div><!-- /cursor --><ahref="http://www.bootstrapmb.com"class="abs-site-link"rel="nofollow noreferrer"target="_blank">abs/designs/d11-plant-app-sign-up-ui</a><!-- partial --><scriptsrc="./script.js"></script></body></html>
/*================================Best Viewed In Full Page================================更多下载：http://www.bootstrapmb.com*//*Steps:#1: Click/Enter on the button that contains -> and it will take you to second screen#2: Click/Focus on input fields and fields are going to be filled themselve with the data that I set up -- just for ease -- and submit the form#3: And done it'll take you to the third screenMy focus was on the animations, and I love them, hope you love the leafs animations as well, don't hesitate to tell me what you think :)In case you want to see how the animations look you can visit the link thats on the left bottom side (inside the frame) and it'll take you to my site where I've shared the video of how this works...*/@import url('https://fonts.googleapis.com/css?family=Merriweather&display=swap');/* default *//* =============================================================================================== */*,*::before,*::after {margin: 0;padding: 0;box-sizing: border-box;}html {font-size: 62.5%;}body {display: flex;flex-direction: column;justify-content: center;align-items: center;min-height: 100vh;padding: 2rem;font-family: 'Merriweather';background: url('bg.jpg');background-size: cover;}button {border: none;color: inherit;background: transparent;cursor: pointer;}button::-moz-focus-inner {border: 0;}/* app *//* =============================================================================================== */.app {--light-1: hsl(114, 31%, 93%);--light-2: hsl(114, 31%, 96%);--green-1: hsl(130, 46%, 38%);--green-2: hsl(130, 50%, 50%);--green-3: hsl(131, 42%, 42%);--green-4: hsl(130, 45%, 45%);--gray-1: hsl(0, 0%, 50%);--gray-2: hsl(0, 0%, 90%);--dark-1: hsl(0, 0%, 8%);--dark-2: hsl(0, 0%, 20%);--gradient-1: linear-gradient(to right bottom, var(--green-2), var(--green-1));--gradient-2: linear-gradient(to right bottom, var(--light-2), var(--light-1));width: 22rem;height: 46rem;border-radius: 2rem;box-shadow: 0 3rem 4rem .4rem hsla(0, 0%, 0%, .1),0 1.5rem 2.4rem -1rem hsla(0, 0%, 0%, .06),0 0 2.4rem hsla(0, 0%, 0%, .06);position: relative;overflow: hidden;}/* leafs *//* =============================================================================================== */.svg-leafs {position: absolute;top: -100%;left: -100%;visibility: hidden;}.leaf {position: absolute;right: 0;bottom: 0;z-index: 4;width: 20rem;pointer-events: none;transition: .3s;}.leaf--1 {right: -3rem;bottom: -11.5rem;transform: rotate(90deg);}.leaf--2 {right: -2rem;bottom: -8rem;transform: rotate(55deg);}.leaf--3 {right: -.5rem;bottom: -10.5rem;transform: rotate(15deg);}/* Other *//* =============================================================================================== */.number {width: 100%;margin-bottom: 2rem;text-align: right;}.heading {font-size: 2.6rem;letter-spacing: .2rem;transition: .4s;}.description {margin-top: 2rem;line-height: 2;}/* screen *//* =============================================================================================== */.screen {position: absolute;top: 0;left: 0;display: flex;flex-direction: column;justify-content: center;width: 100%;height: 100%;border-radius: inherit;padding: 2rem;color: var(--light-1);background: transparent;}/* first-screen *//* =============================================================================================== */.first-screen {align-items: flex-start;background: var(--gradient-1);}/* second-screen *//* =============================================================================================== */.second-screen {color: var(--green-1);left: 100%;z-index: 2;}.second-screen .heading {opacity: 0;transform: translate(30px);}/* third-screen *//* =============================================================================================== */.third-screen {left: 100%;z-index: 3;}.third-screen .heading {opacity: 0;transform: translateY(30px);}/* buttons *//* =============================================================================================== *//* btn-circle *//* ---------------------------------------- */.btn-circle {width: 4rem;height: 4rem;border-radius: 100rem;display: flex;justify-content: center;align-items: center;}/* btn-pTSecond *//* ---------------------------------------- */.btn-pTSecond {margin-top: 2rem;border: 1px solid var(--light-1);transform: scale(.8);transform-origin: left center;transition: .3s;}.btn-pTSecond:hover,.btn-pTSecond:focus {transform: scale(1);}.btn-pTSecond::before {content: '';width: 100%;height: 100%;border-radius: inherit;position: absolute;background: var(--gradient-2);transform: scale(0);transition: .6s;}/* btn-pTFirst *//* ---------------------------------------- */.btn-pTFirst {color: var(--light-1);background: var(--gradient-1);position: absolute;top: 2rem;left: 2rem;}/* btn-words *//* ---------------------------------------- */.btn-words {width: 100%;font-size: 1.2rem;transition: all .4s, transform 1s .5s;}/* btn-form *//* ---------------------------------------- */.btn-form {border-radius: 100rem;margin-top: .4rem;padding: 1rem 0;color: var(--gray-1);background: var(--gray-2);font-weight: bold;z-index: 1;}.btn-form::before {content: '✓';position: absolute;transform: scale(0) translateX(-3px);transition: .5s .4ms cubic-bezier(.17, .09, .77, 1.8);}.btn-form::after {content: '';width: 100%;height: 100%;border-radius: inherit;position: absolute;top: 0;left: 0;background: var(--gradient-1);transform: scale(0);transition: .6s;}/* btn-sign-in *//* ---------------------------------------- */.btn-sign-in {color: var(--dark-2);}/* form *//* =============================================================================================== */.form {width: 100%;margin: 4rem 0 2rem;text-align: center;opacity: 0;transform: translateY(2rem);}.form__field {width: 100%;height: auto;margin-bottom: 2.2rem;position: relative;}.form__field::before,.form__field::after {content: '';width: 0;position: absolute;bottom: 0;left: 0;transition: .5s;}.form__field::before {border-bottom: 1px solid var(--gray-1);opacity: .3;}.form__field::after {width: 0;border-bottom: 1px solid var(--green-1);}.form__field:focus-within::after {width: 100%;}.form__input {width: 100%;border: none;padding-bottom: .8rem;color: var(--dark-1);background: transparent;font-size: 1.2rem;}.form__success {position: absolute;left: 50%;bottom: .9rem;font-size: 1.2rem;pointer-events: none;opacity: 0;transform: translateX(-.4rem);transition: 1s .5s;}/* Styles that will be added via JavaScript *//* =============================================================================================== *//* second-screen-opened *//* ---------------------------------------- */.second-screen-opened .leaf {transition: 1s;}.second-screen-opened .leaf--1 {right: -8.8rem;bottom: 78%;transform: rotate(5deg);}.second-screen-opened .leaf--2 {right: -8.6rem;bottom: -5rem;transform: rotate(80deg);}.second-screen-opened .leaf--3 {right: 11rem;bottom: -4.2rem;transform: rotate(180deg);}.second-screen-opened .first-screen .heading {opacity: 0;transform: translateX(30px);}.second-screen-opened .btn-pTSecond::before {border-radius: 0;transform: scale(22);}.second-screen-opened .second-screen {left: 0;}.second-screen-opened .second-screen .heading {opacity: 1;transform: translate(0);transition: 1s .4s;}.second-screen-opened .second-screen .form {opacity: 1;transform: translateY(0);transition: .7s .1s;}.second-screen-opened .form__field::before {width: 100%;transition: .8s .3s;}/* third-screen-opened *//* ---------------------------------------- */.third-screen-opened .leaf--1 {right: 10rem;bottom: -8rem;transform: rotate(-10deg);}.third-screen-opened .leaf--2 {right: 10rem;bottom: 74%;transform: rotate(90deg);}.third-screen-opened .leaf--3 {right: -10.2rem;bottom: 26%;transform: rotate(40deg);}.third-screen-opened .second-screen .heading {opacity: 0;transform: translateX(30px);}.third-screen-opened .btn-form::after {border-radius: 0;transform: scale(22);}.third-screen-opened .third-screen {left: 0;}.third-screen-opened .third-screen .heading {opacity: 1;transform: translate(0);transition: 1s .4s;}/* on-btn-pTSecond *//* ---------------------------------------- */.on-btn-pTSecond .leaf--1 {right: -3rem;bottom: -8.5rem;transform: rotate(97deg);}.on-btn-pTSecond .leaf--2 {bottom: -5rem;transform: rotate(52deg);}.on-btn-pTSecond .leaf--3 {right: 3rem;bottom: -7.5rem;transform: rotate(5deg);}/* .form-ready *//* ---------------------------------------- */.form-ready .btn-form {color: var(--light-1);background: var(--green-2);}/* .form-submitted *//* ---------------------------------------- */.form-submitted .btn-form {width: 3.6rem;transform: translateX(-2rem);}.form-submitted .btn-form::before {transform: scale(1) translateX(-3px);}.form-submitted .form__success {opacity: 1;transform: translateX(.4rem);}.form-submitted .btn-sign-in {opacity: 0;}/* custom-cursor *//* =============================================================================================== */.custom-cursor {width: 3rem;height: 3rem;border: 1px solid hsla(0, 0%, 100%, .7);border-radius: 100%;background: hsla(0, 0%, 80%, .2);position: absolute;z-index: 5;transform: translate(-50%, -50%);pointer-events: none;}.abs-site-link {position: fixed;bottom: 20px;left: 20px;color: hsla(0, 0%, 100%, .6);font-size: 1.6rem;font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;}
// by// abubakersaeed.netlify.com | @AbubakerSaeed96// ============================================// Leafs SVG quickly drawn by me// �������أ�http://www.bootstrapmb.com// Background image:// From Unsplash - link is in CSS panel// Thank You for Viewing// Helpers/* =============================================================================================== */const $ = e => document.querySelector(e);const $$ = e => document.querySelectorAll(e);// Variablesconst app = $(".app");const pTSecondButton = $(".btn-pTSecond");const form = $(".form");const formInputs = $$(".form__input");const formButton = $(".btn-form");const cursor = $(".custom-cursor");// pTSecondButton Events/* =============================================================================================== */pTSecondButton.addEventListener("mouseenter", () => {app.classList.add("on-btn-pTSecond");})pTSecondButton.addEventListener("focus", () => {app.classList.add("on-btn-pTSecond");})pTSecondButton.addEventListener("mouseleave", () => {app.classList.remove("on-btn-pTSecond");})pTSecondButton.addEventListener("blur", () => {app.classList.remove("on-btn-pTSecond");})pTSecondButton.addEventListener("click", () => {app.classList.add("second-screen-opened");app.classList.remove("on-btn-pTSecond");})// Cursor Event/* =============================================================================================== */window.addEventListener("mousemove", ({pageY: Y, pageX: X}) => {cursor.style.top = `${Y}px`;cursor.style.left = `${X}px`;})// Form Stuff/* =============================================================================================== */function checkForm() {let f = 0;for (let i = 0; i < formInputs.length; i++) {(formInputs[i].value !== '') ? f++ : f--;}(f === 2) ? app.classList.add("form-ready") : app.classList.remove("form-ready");return f;}form.addEventListener("submit", e => {// preventing form from submittinge.preventDefault();// and opening third screensetTimeout(() => {app.classList.add("third-screen-opened");}, 1600);})// form-ready - check if form is ready or not and if ready add .form-ready class on .app else remove if .app hasfor (let i = 0; i < formInputs.length; i++) {// auto-filling form (don't try or do... this in real application, i know... your welcome)// via mouse clickformInputs[i].addEventListener("click", e => {if (e.target.value === '') e.target.value = e.target.dataset.info;checkForm();})// via focus through keyboardformInputs[i].addEventListener("focus", e => {if (e.target.value === '') e.target.value = e.target.dataset.info;checkForm();})formInputs[i].addEventListener("input", checkForm);}// form-submitted animation - when btn-form clicked/pressed add .form-submitted class on .app (if form is ready)formButton.addEventListener("click", () => {if (checkForm() === 2) {formButton.innerHTML = " ";app.classList.add("form-submitted");}})