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><!-- <label><span style="transition-delay: 0ms">E</span><span style="transition-delay: 50ms">m</span><span style="transition-delay: 100ms">a</span><span style="transition-delay: 150ms">i</span><span style="transition-delay: 200ms">l</span></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>
