仅用CSS实现背景动效：如何制作如图所示的背景动画？

核心思路 #

通过多层线性渐变构建色彩丰富的背景基底，再借助@keyframes控制background-position的持续位移，模拟出背景流动的动态效果。

完整实现代码 #

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

.animated-bg {
  width: 100vw;
  height: 100vh;
  /* 叠加多层不同角度的线性渐变 */
  background: 
    linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4),
    linear-gradient(-45deg, #feca57, #ff9ff3, #54a0ff, #c8d6e5);
  /* 设置色彩混合模式，让渐变融合更自然 */
  background-blend-mode: screen;
  /* 让背景尺寸大于容器，保证位移时有足够空间 */
  background-size: 200% 200%;
  /* 绑定动画，设置循环、过渡节奏 */
  animation: bgFlow 8s ease-in-out infinite alternate;
}

/* 定义背景流动的关键帧 */
@keyframes bgFlow {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

关键属性说明 #

• background-blend-mode: screen：让多层渐变色彩叠加后更柔和，也可以换成multiply、overlay等模式调整风格。
• background-size: 200% 200%：将背景尺寸设为容器的2倍，避免背景位移时出现断层，保证流动效果连续。
• animation参数：8s控制动画时长，ease-in-out让首尾过渡更顺滑，infinite实现循环播放，alternate让动画到末尾后反向返回，形成往复流动的效果。

自定义调整技巧 #

• 更换配色：直接修改linear-gradient里的颜色值，就能适配不同风格需求。
• 调整速度：修改动画时长数值，比如12s让流动更平缓，4s则更快。
• 切换渐变类型：把linear-gradient换成radial-gradient，可以实现从中心向外扩散的流动效果。

内容的提问来源于stack exchange，提问作者Acho Arnold