精灵图(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; }素材: 实现效果:如果网页中闪烁效果太明显,可以将精灵图内容放在同一行上。