css3 精灵动画 |坦克游戏css

/* 定义图片位置 */
.sprite {
width: 100px;
height: 100px;
background-image: url(sprite.png);
}
/* 定义动画 */
@keyframes spin {
from { background-position: 0px 0; }
to { background-position: -1400px 0; }
}
/* 给元素添加动画 */
.sprite { animation: spin 1s steps(14) infinite; }

上面的代码定义了一个精灵动画，首先定义了一组图片的位置和尺寸，然后定义了动画的关键帧，即初始位置和结束位置，最后将该动画应用在这组图片上，让它无限循环播放。

CSS3精灵动画可以用于各种场景，如切换状态、表现动态效果、制作小游戏等，它具有简单、高效、易维护等优点，成为前端开发中必不可少的一环。