如何使用css结合序列图（sprite），为你的网页丰富动效

为了让网页更加生动有趣，我们可以使用CSS用序列图片做动画。很多复杂的动画，一般不要求我们用CSS3变形的方式画出来，而是采用一帧一帧连续播放静态的图片的方式形成动画。

具体实现方法是将一组图片合并成一张雪碧图（sprite），然后通过CSS的background-position属性来控制显示的图片位置来实现动画效果。

雪碧图（sprite）制作

我们可以通过3d软件，动画软件，图片设计软件来制作一组有动画效果的pgn图片，然后合成为一张图，所有图片改变效果放在一个图上，然后通过位移的动画效果做成看起来会动一样。

常用软件有：blender，C4d，ps，ai，Sketch，xd，figma等

当我们拥有一张雪碧图后，就可以进入css动画部分了

.sprite {
/* 雪碧图的背景图片路径 */
background-image: url(sprite.png);
/* 控制大小 */
width: 100px;
height: 100px;
/* 不显示雪碧图之外的部分 */
overflow: hidden;
}
/* 定义动画名称、时长、播放次数 */
@keyframes run {
0% {
background-position: 0 0;
}
100% {
background-position: -2500px 0; /* 2500为实际图片总宽度，共25张图合成为一张大图 */
}
}
.sprite.animate {
animation-name: run;
animation-duration: 1s;
animation-iteration-count: infinite; /* 无限循环 */
}

首先，通过sprite类定义一个div，将雪碧图作为背景图片。然后定义一个action动画，控制background-position值，使雪碧图在div中显示不同的图片。最后，通过animate类来应用action动画。