Preview

仅用CSS实现，平滑改变颜色的美丽动画渐变背景。通过使用关键帧动画来移动背景位置，表现出流畅的颜色变化。

实现代码

请复制以下代码，并在您的项目中使用。

<div class="animated-gradient-bg"></div>

.animated-gradient-bg {
  width: 100%;
  height: 100vh;
  background: linear-gradient(
    45deg,
    #ff7b00,
    #ff0055,
    #a200ff,
    #0055ff,
    #00ffcc
  );
  background-size: 400% 400%;
  animation: gradient-flow 15s ease infinite;
}

@keyframes gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

解说

此动画背景的要点是以下两点：

background-size: 400% 400%: 将渐变的大小设置为元素的4倍，扩展到绘制区域之外。
@keyframes gradient-flow: 通过将 background-position 从 0% 平滑移动到 100%，再回到 0%，使展开的渐变移动，看起来像是在改变颜色。

通过更改 linear-gradient 的颜色和 animation 的秒数，可以根据网站主题进行自定义。