利用css3 steps制作的动画效果

利用css3 steps制作动画效果

-写在前面---
今天在看阿里云网站的时候发现了一个很有趣的动效,便自己试着做了一下。
这个动效让我想起了小时候的本子动画,利用纸张的快速翻页,实现每张纸上静态图片形成连贯的动画。
-进入正题---
这个动效借助css3的transform+step来实现。
首先是一张有着动效图在每个帧下的图片,这是阿里云抠下来的图片(超长图,拼命下拉吧~)

利用css3 steps制作的动画效果_第1张图片
lizi.jpg

接着就是上正式的代码了




静态效果图.png

你可能感兴趣的:(利用css3 steps制作的动画效果)