纯CSS实现图片动画
1、先网上下载一张sprites动画图片，直接百度搜sprites图片就可。
2、用css设置一个关键帧，确定好起始位置和终止位置，
通过background-position调整背景图片在div框中显示的位置。
图片可以用ps查看像素大小，便于定位起始位置和结束位置。
3、通过animation: test 1s steps(3) infinite;设置动画效果
test：关键帧的名称；
1s：动画从开始到结束的时间
steps(3)：步进式播放动画，简言之就是将图片分成了3块进行跳转
infinite：无线循环
图片：
代码：
<style>
.test {
width: 72px;
height: 62px;
background-image: url(./wukong.webp);
animation: test 1s steps(3) infinite;/* 设置动画参数 */
margin: 0 auto;
}
@keyframes test {
from {
background-position: -242px -60px;/* 起始位置 */
}
to {
background-position: -450px -60px;/* 结束位置 */
}
}
</style>
<body>
<div class="test"></div>
</body>
效果：
