1.整体效果
一个酷炫的登录页不仅能够吸引用户的注意力，还能够提升品牌形象，增加用户的信任感。CSS动画效果的引入，可以为登录页增添活力，创造更加动态和互动的用户体验。本文将探讨如何使用CSS来实现各种动画效果，从微妙的背景渐变到引人注目的登录框动画，一步步指导您打造出一个既美观又实用的酷炫登录页。
2.完整代码
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="6_2.css"> </head> <body> <div class="ring"> <i style="--clr:#ffd500;"></i> <i style="--clr:#ff0057;"></i> <i style="--clr:#084ee3;"></i> <div class="login"> <h2>用户登录系统</h2> <div class="inputBx"> <input type="text" placeholder="用户名"> </div> <div class="inputBx"> <input type="password" placeholder="密码"> </div> <div class="inputBx"> <input type="submit" value="登录"> </div> <div class="links"> <a href="#">记住密码</a> <a href="#">忘记密码</a> </div> </div></div> </body> </html>
CSS
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Quicksand", sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #111; width: 100%; overflow: hidden; } .ring { position: relative; width: 500px; height: 500px; display: flex; justify-content: center; align-items: center; } .ring i { position: absolute; inset: 0; border: 2px solid #fff; transition: 0.5s; } .ring i:nth-child(1) { border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; animation: animate 6s linear infinite; } .ring i:nth-child(2) { border-radius: 41% 44% 56% 59%/38% 62% 63% 37%; animation: animate 4s linear infinite; } .ring i:nth-child(3) { border-radius: 41% 44% 56% 59%/38% 62% 63% 37%; animation: animate2 10s linear infinite; } .ring:hover i { border: 6px solid var(--clr); filter: drop-shadow(0 0 20px var(--clr)); } @keyframes animate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes animate2 { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } .login { position: absolute; width: 300px; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 20px; } .login h2 { font-size: 2em; color: #fff; } .login .inputBx { position: relative; width: 100%; } .login .inputBx input { position: relative; width: 100%; padding: 12px 20px; background: transparent; border: 2px solid #fff; border-radius: 40px; font-size: 1.2em; color: #fff; box-shadow: none; outline: none; } .login .inputBx input[type="submit"] { width: 100%; background: #0078ff; background: linear-gradient(45deg, #ff357a, #fff172); border: none; cursor: pointer; } .login .inputBx input::placeholder { color: rgba(255, 255, 255, 0.75); } .login .links { position: relative; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; } .login .links a { color: #fff; text-decoration: none; }
