OK,CSS3演武场今天继续,我们重点来看看css3 animation实现逐帧动画,额,按照惯例,看效果点这里,下载戳这里。
实现原理
a.外盒子div.cell,一个字的宽和高,超过不显示,确保只能显示一个字。
b.内盒子div.num,一个字的宽,行高一个字高,我们通过这个盒子的移动实现动画。
c.内盒子的移动动画的animation-timing-function使用step
d.倒计时结束,外盒子动画消失掉
实现过程
好的,来看看实现过程,html文件是这样的,中文的倒计时也可以,不过中文的网络字体太少,所以没弄,感兴趣的同学可以弄起来。
<div class="cell">
<div class="num">5 4 3 2 1 0</div>
<!--<div class="num">五 四 三 二 一 零</div>-->
</div>
CSS部分使用prefix free和normailize,另外为了实现英文字体,我们用了google字体,你需要导入这个文件