这是一个会眨眼会扭屁股的顽皮奶牛，其实这个动画用的只有2个知识点，一个是帧，一个是CSS3动画中的steps(num,start/end)函数。
先讲一下知识点：
1.帧
这个概念可能在电影和电视制作中经常听到（电视制式是每秒25帧,电影所用的是胶片,固定的是24帧每秒），这里的帧其实就是雪碧图上若干个小图，每个小图可以看做一个帧，当然不知道这样比喻是不是足够合理。
2.steps(num,start/end)
第一个参数指定了时间函数中的间隔数量（必须是正整数），可以理解为每两个帧之间走几步；第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。
3.具体案例分析
这个奶牛的大图，很明显是每两个帧之间走一步，所以我们的num改成1；然后，奶牛在完整整个动作之后，要再回到起初第一帧的位置，所以我们设置第二个参数为start，而不是end。
可以直接用这个图做，虽然是jpg的
讲解结束，有没有觉得很简单？可以自己试试哦！
下面上代码，因为兼容性问题，需要加兼容前缀，这里为了节省空间就没写，自己加一下！
HTML代码：
CSS3代码：
最后给大家留2个思考：
1.假设我把雪碧图改成如下情况，又该如何写？（效果和上面是一样的）
这个比上面的简单哦
2.如何制作苹果人向你招手动画（图在这）？
跟问题1的逻辑差不多
可以留言写出你的代码，觉得好玩的，记得给出你的“❤”哦！
网友评论