利用css3 steps制作动画效果
-写在前面---
今天在看阿里云网站的时候发现了一个很有趣的动效，便自己试着做了一下。
这个动效让我想起了小时候的本子动画，利用纸张的快速翻页，实现每张纸上静态图片形成连贯的动画。
-进入正题---
这个动效借助css3的transform+step来实现。
首先是一张有着动效图在每个帧下的图片，这是阿里云抠下来的图片（超长图，拼命下拉吧~）
lizi.jpg
接着就是上正式的代码了
<body><div class="donghua"></div><style>.donghua{width: 75px;height: 75px;background-image: url(images/lizi.jpg);background-size: 75px;cursor: pointer;}.donghua:hover{animation: moving 1.5s steps(60);}@keyframes moving {from{background-position:0 0px;}to{background-position:0 -9000px ;}}</style></body>
静态效果图.png
网友评论