【CSS3】CSS3 动画 ⑥ ( 动画属性示例 | 精灵图帧动画效果实现 )
/* 精灵图的基本样式 */
.sprite {
width: 100px;
height: 100px;
background-image: url('sprite.png');
background-position: -100px -100px; /* 初始位置 */
animation: moveSprite 1s steps(8) infinite; /* 应用动画 */
}
/* 定义关键帧 */
@keyframes moveSprite {
from { background-position: -100px -100px; }
to { background-position: -800px -100px; } /* 结束位置 */
}这段代码定义了一个具有精灵图动画效果的.sprite类。它设置了精灵图的初始位置，并通过animation属性应用了名为moveSprite的动画，该动画会使精灵图在水平方向上循环播放8帧。通过steps(8)函数，动画被分解为8个步骤，避免平滑过渡，从而实现了类似于帧动画的效果。
评论已关闭