CSS 如何实现背景动画效果？

Question

CSS 如何实现背景动画效果？

仓乃文 · Accepted Answer

CSS 渐变背景不支持直接的过渡动画，但可以利用 box-shadow 多层阴影可补间动画的特性来模拟背景动画效果。

```css
.animated-bg::before {
  content: ";
  position: absolute;
  width: 50px;
  height: 50px;
  box-shadow:
    50px 50px #000, 150px 50px #000, 250px 50px #000,
    50px 100px #000, 150px 100px #000, 250px 100px #000;
  transition: box-shadow 0.5s ease;
}

.animated-bg:hover::before {
  box-shadow:
    0 0 #000, 100px 0 #000, 200px 0 #000,
    0 50px #000, 100px 50px #000, 200px 50px #000;
}
```

补充说明：
- box-shadow 支持多层阴影叠加，用逗号分隔
- box-shadow 可以进行过渡变换动画（补间动画），而 background-image: linear-gradient() 不支持补间动画
- 适合小规模的点阵背景动画，大规模场景需注意性能