【CSS3】CSS3 动画 ⑥ ( 动画属性示例 | 精灵图帧动画效果实现 )

作者：System 时间：2024年08月15日分类：所有,css3 字数：543

这篇文章距离上次修改已过234天，其中的内容可能已经有所变动。

/* 精灵图的基本样式 */
.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个步骤，避免平滑过渡，从而实现了类似于帧动画的效果。

【CSS3】CSS3 动画 ⑥ ( 动画属性示例 | 精灵图帧动画效果实现 )

评论已关闭

推荐阅读