回车键和tab键不一样? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>帅气的分步注册</title> <style type="text/css"> input, button { position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -300%); transform: translate(-50%, -300%); display: block; width: 70vw; opacity: 0; pointer-events: none; -webkit-transition: all 0.5s cubic-bezier(0.4, 0.25, 0.8, 0.3); transition: all 0.5s cubic-bezier(0.4, 0.25, 0.8, 0.3); } input { padding: .25rem 0; border: 0; border-bottom: 1px solid #bb1515; outline: 0; background: transparent; color: #fff; font-size: 3rem; line-height: 4rem; letter-spacing: .125rem; -webkit-transition: all 0.5s cubic-bezier(0.4, 0.25, 0.8, 0.3); transition: all 0.5s cubic-bezier(0.4, 0.25, 0.8, 0.3); } input::-moz-selection { background: rgba(187, 21, 21, 0.25); } input::selection { background: rgba(187, 21, 21, 0.25); } button, .signup-button { padding: .25em 0; border: 0; outline: 0; background: #bb1515; color: rgba(255, 255, 255, 0.85); font-size: 2rem; line-height: 3.6rem; letter-spacing: .0625rem; box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.25); text-shadow: 0 -2px 0 rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.2); } input:focus, button:focus { opacity: 1; -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%); pointer-events: auto; -webkit-transition: all 0.4s cubic-bezier(0.1, 0.45, 0.1, 0.85) 0.5s; transition: all 0.4s cubic-bezier(0.1, 0.45, 0.1, 0.85) 0.5s; z-index: 10; } input:focus ~ input, input:focus ~ button { -webkit-transform: translate(-50%, 500%); transform: translate(-50%, 500%); -webkit-transition: all .5s ease-in; transition: all .5s ease-in; } input:focus ~ label .label-text { -webkit-transform: translate(-50%, 300%); transform: translate(-50%, 300%); -webkit-transition: all .5s ease-in; transition: all .5s ease-in; } input:focus ~ .tip { opacity: 1; } input:focus ~ .signup-button, button:focus ~ .signup-button { opacity: 0; } input:focus + label .label-text { opacity: 1; -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%); -webkit-transition: all 0.3s cubic-bezier(0.1, 0.45, 0.1, 0.85) 0.4s; transition: all 0.3s cubic-bezier(0.1, 0.45, 0.1, 0.85) 0.4s; } input:focus + label .nav-dot:before { background: #a41212; box-shadow: 0 0 0 0.15rem #111, 0 0 0.05rem 0.26rem #bb1515; } .tip { position: fixed; top: 57%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 70%; opacity: 0; color: #fff; font-size: .875rem; font-weight: 300; letter-spacing: .125rem; text-transform: uppercase; text-align: right; -webkit-transition: opacity .25s .5s; transition: opacity .25s .5s; } .signup-button, .signup-button-trigger { position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%); width: 70vw; padding: .25rem 0; line-height: 3.6rem; text-align: center; pointer-events: none; cursor: pointer; -webkit-transition: opacity .4s .3s; transition: opacity .4s .3s; } .signup-button-trigger { opacity: 0; pointer-events: auto; } .label-text { position: fixed; top: calc(50% - 4rem); left: 50%; -webkit-transform: translate(-50%, -300%); transform: translate(-50%, -300%); width: 70vw; padding: 3.125rem 0 1.5rem; text-transform: uppercase; color: #fff; opacity: 0; font-size: 1.125rem; font-weight: 300; letter-spacing: .125rem; pointer-events: none; -webkit-transition: all 0.4s cubic-bezier(0.4, 0.25, 0.8, 0.3) 0.05s; transition: all 0.4s cubic-bezier(0.4, 0.25, 0.8, 0.3) 0.05s; } .nav-dot { cursor: pointer; position: fixed; padding: .625rem 1.25rem .625rem .625rem; top: 52%; right: 1.25rem; } .nav-dot:before { content: ''; display: inline-block; border-radius: 50%; width: .375rem; height: .375rem; margin-right: .625rem; position: fixed; background-color: #16272f; border: 0; -webkit-transition: all 0.25s; transition: all 0.25s; } .nav-dot:hover:before { width: .625rem; height: .625rem; margin-top: -.125rem; margin-left: -.125rem; background-color: #a41212; } label[for="input-1"] .nav-dot { margin-top: -125px; } label[for="input-2"] .nav-dot { margin-top: -100px; } label[for="input-3"] .nav-dot { margin-top: -75px; } label[for="input-4"] .nav-dot { margin-top: -50px; } label[for="input-5"] .nav-dot { margin-top: -25px; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; background-image: -webkit-linear-gradient(top left, #111E25 0%, #111 100%); background-image: linear-gradient(to bottom right, #111E25 0%, #111 100%); font-family: 'Lato', sans-serif; } form { width: 100%; height: 100%; overflow: hidden; } </style> </head> <body> <form> <!-- <input id="input-1" type="text" placeholder="John Doe" required autofocus /> --> <input id="input-1" type="text" placeholder="John Doe" required /> <label for="input-1"> <span class="label-text">Full Name</span> <span class="nav-dot"></span> <div class="signup-button-trigger">Sign Up</div> </label> <input id="input-2" type="text" placeholder="john" required /> <label for="input-2"> <span class="label-text">Username</span> <span class="nav-dot"></span> </label> <input id="input-3" type="email" placeholder="email@address.com" required /> <label for="input-3"> <span class="label-text">Email</span> <span class="nav-dot"></span> </label> <input id="input-4" type="text" placeholder="●●●●●●" required /> <label for="input-4"> <span class="label-text">Password</span> <span class="nav-dot"></span> </label> <input id="input-5" type="text" placeholder="●●●●●●" required /> <label for="input-5"> <span class="label-text">Confirm Password</span> <span class="nav-dot"></span> </label> <button type="submit">Create Your Account</button> <p class="tip">Press Tab</p> <div class="signup-button">Sign Up</div> </form> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 帅气的分步注册 喜欢 (4)or分享 (0)
