CSS动画效果（炫酷登录页面）

1.整体效果

https://mmbiz.qpic.cn/sz_mmbiz_gif/EGZdlrTDJa6ibiceejK9loT70yREYASOhuSRaI6vQtQ42zN48oafaWDzdndicRuicL31ZuK3mhD82oJThcFHYuSCkw/640?wx_fmt=gif&from=appmsg&wxfrom=13

一个酷炫的登录页不仅能够吸引用户的注意力，还能够提升品牌形象，增加用户的信任感。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;  
}