精灵图(sprite)实现动画

精灵图(sprite)实现动画

       用精灵图做一个二哈奔跑的动画。

1.精灵图制作

       将每一帧图片按动画序列顺序放好，然后调出PhotoShop的网格，调好每一帧的位置，同一行每一帧之间的距离等距，上下两行间的距离也调成等距。

2.代码

       用PhotoShop中的标尺工具测量图片高度，作为css中height的值，如果图片做的比较好可直接用百分比(50%)，width的值为整个图片宽度。

当第一行遍历完后，前往遍历第二行的过程有个回退效果，为了减弱这个效果的显示，在css中设置第一行到第二行的转移时，尽可能地让该过程占用的时间很小。

html部分

css部分

*{ margin: 0; padding: 0; } html{ background-color:skyblue; } @keyframes husky_running{ 0%{ background-position: 0 0; } 50%{ background-position:-591px 0px; } 50.01%{ background-position: 0 -88.58px; } 100%{ background-position: -591px -88.58px; } }.husky{ height: 84px; width: 117px; margin: 50px auto; background-image: url(https://img-blog.csdnimg.cn/2023042516115940.png); /* overflow: hidden;*/ animation: husky_running 0.5s steps(5) infinite; -webkit-animation: husky_running 0.5s steps(5) infinite; }

素材： 实现效果：如果网页中闪烁效果太明显，可以将精灵图内容放在同一行上。