CSS动画可以用在背景图上吗（实用技巧版）

带孩子学做网页小项目时，常常会遇到这样的问题：能不能让背景图动起来？比如一张星空图缓缓移动，或者一片云彩慢慢飘过。这时候家长可能会问：CSS动画可以用在背景图上吗？答案是肯定的，而且实现起来并不复杂。

用 background-position 实现移动效果

最常见的方式是通过改变背景图的位置来制造动画。比如让一张背景图从左向右平移，模拟出流动的效果。这可以通过 background-position 配合 @keyframes 来完成。

.sky {
  width: 100%;
  height: 300px;
  background-image: url('clouds.png');
  background-repeat: repeat-x;
  animation: slide 20s linear infinite;
}

@keyframes slide {
  0% { background-position: 0 0; }
  100% { background-position: -1000px 0; }
}

上面这段代码会让云朵图片持续向左滚动，适合用在给孩子做的童话主题网页中，比如“会飞的小猪”故事背景。

缩放和旋转也能用于背景？

直接对背景图进行旋转或缩放是不行的，因为 CSS 的 transform 属性作用的是整个元素，而不是它的背景。但我们可以换个思路——把背景图放在一个伪元素上，再对这个伪元素做动画。

.animated-bg {
  position: relative;
  height: 200px;
}

.animated-bg::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url('stars.jpg') no-repeat;
  background-size: cover;
  animation: zoom 10s ease-in-out infinite alternate;
  z-index: -1;
}

@keyframes zoom {
  from { transform: scale(1); }
  to { transform: scale(1.2); }
}

这样就能做出背景图微微放大缩小的呼吸效果，像是星星在眨眼，特别适合睡前故事页面。

实际应用场景

我家孩子做了一个“海底世界”的作业页面，我们用动画让海草左右摇摆，背景色还缓慢变深，模拟从白天到夜晚。虽然没动用 JavaScript，但看起来已经挺生动了。这类小项目既能练手，又能激发孩子的兴趣。

CSS 动画对背景图的支持虽然有限制，但只要方法得当，完全可以做出让人眼前一亮的效果。关键不是功能多强，而是怎么用简单的技术讲好一个故事。