位置: IT常识 - 正文

分享两个有意思的登录界面(有意义的分享)

编辑：rootadmin

分享两个有意思的登录界面

推荐整理分享分享两个有意思的登录界面(有意义的分享)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:分享一个比较有意思的话题,分享一个比较有意思的话题,有意义的分享,分享两个有意思的故事,有意思的分享,分享一个比较有意思的话题,分享两个有意思的人,分享两个有意思的事情,内容如对您有帮助，希望把文章链接给更多的朋友！

1.带有浮动占位符和灯光按钮的登录界面先上效果：代码如下：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> html { height: 100%; } body { margin:0; padding:0; font-family: sans-serif; background: linear-gradient(#141e30, #243b55); } .login-box { position: absolute; top: 50%; left: 50%; width: 400px; padding: 40px; transform: translate(-50%, -50%); background: rgba(0,0,0,.5); box-sizing: border-box; box-shadow: 0 15px 25px rgba(0,0,0,.6); border-radius: 10px; } .login-box h2 { margin: 0 0 30px; padding: 0; color: #fff; text-align: center; } .login-box .user-box { position: relative; } .login-box .user-box input { width: 100%; padding: 10px 0; font-size: 16px; color: #fff; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; } .login-box .user-box label { position: absolute; top:0; left: 0; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: .5s; } .login-box .user-box input:focus ~ label, .login-box .user-box input:valid ~ label { top: -20px; left: 0; color: #03e9f4; font-size: 12px; } .login-box form a { position: relative; display: inline-block; padding: 10px 20px; color: #03e9f4; font-size: 16px; text-decoration: none; text-transform: uppercase; overflow: hidden; transition: .5s; margin-top: 40px; letter-spacing: 4px } .login-box a:hover { background: #03e9f4; color: #fff; border-radius: 5px; box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4; } .login-box a span { position: absolute; display: block; } .login-box a span:nth-child(1) { top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #03e9f4); animation: btn-anim1 1s linear infinite; } @keyframes btn-anim1 { 0% { left: -100%; } 50%,100% { left: 100%; } } .login-box a span:nth-child(2) { top: -100%; right: 0; width: 2px; height: 100%; background: linear-gradient(180deg, transparent, #03e9f4); animation: btn-anim2 1s linear infinite; animation-delay: .25s } @keyframes btn-anim2 { 0% { top: -100%; } 50%,100% { top: 100%; } } .login-box a span:nth-child(3) { bottom: 0; right: -100%; width: 100%; height: 2px; background: linear-gradient(270deg, transparent, #03e9f4); animation: btn-anim3 1s linear infinite; animation-delay: .5s } @keyframes btn-anim3 { 0% { right: -100%; } 50%,100% { right: 100%; } } .login-box a span:nth-child(4) { bottom: -100%; left: 0; width: 2px; height: 100%; background: linear-gradient(360deg, transparent, #03e9f4); animation: btn-anim4 1s linear infinite; animation-delay: .75s } @keyframes btn-anim4 { 0% { bottom: -100%; } 50%,100% { bottom: 100%; } } </style></head><body><div class="login-box"> <h2>Login</h2> <form> <div class="user-box"> <input type="text" name="" required=""> <label>Username</label> </div> <div class="user-box"> <input type="password" name="" required=""> <label>Password</label> </div> <a href="#"> <span></span> <span></span> <span></span> <span></span> Submit </a> </form></div></body></html>

2.跳跃的登录字符登陆界面先上效果：代码如下：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Form Input Wave</title> <style> @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { box-sizing: border-box; } body { background-color: steelblue; color: #fff; font-family: 'Muli', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .container { background-color: rgba(0, 0, 0, 0.4); padding: 20px 40px; border-radius: 5px; } .container h1 { text-align: center; margin-bottom: 30px; } .container a { text-decoration: none; color: lightblue; } .btn { cursor: pointer; display: inline-block; width: 100%; background: lightblue; padding: 15px; font-family: inherit; font-size: 16px; border: 0; border-radius: 5px; } .btn:focus { outline: 0; } .btn:active { transform: scale(0.98); } .text { margin-top: 30px; } .form-control { position: relative; margin: 20px 0 40px; width: 300px; } .form-control input { background-color: transparent; border: 0; border-bottom: 2px #fff solid; display: block; width: 100%; padding: 15px 0; font-size: 18px; color: #fff; } .form-control input:focus, .form-control input:valid { outline: 0; border-bottom-color: lightblue; } .form-control label { position: absolute; top: 15px; left: 0; pointer-events: none; } .form-control label span { display: inline-block; font-size: 18px; min-width: 5px; transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .form-control input:focus + label span, .form-control input:valid + label span { color: lightblue; transform: translateY(-30px); } </style></head><body><div class="container"> <h1>Please Login</h1> <form> <div class="form-control"> <input type="text" required> <label>Email</label>  </div> <div class="form-control"> <input type="password" required> <label>Password</label> </div> <button class="btn">Login</button> <p class="text">Don't have an account? <a href="#">Register</a> </p> </form></div><script> const labels = document.querySelectorAll('.form-control label') labels.forEach(label => { label.innerHTML = label.innerText .split('') .map((letter, idx) => `<span style="transition-delay:${idx * 50}ms">${letter}</span>`) .join('') })</script></body></html>