动态渐变背景

最新推荐文章于 2024-09-15 21:53:51 发布

春风得逸

最新推荐文章于 2024-09-15 21:53:51 发布

阅读量213

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/lhy0728/article/details/123086018

版权

.content {
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(125deg, #699acc, #27ae9c, #c84be0);
  background-size: 400%;
  animation: bg-item 15s infinite;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content .login-box {
  padding: 20px;
  width: 400px;
  height: 400px;
  background: rgba(20, 15, 95, 0.171);
  border-radius: 15px;
  h1 {
    text-align: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #fff;
  }
}
@keyframes bg-item {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}