css3演武場今天繼續(xù)，我們重點來看看css3 animation實現(xiàn)逐幀動畫，額，按照慣例，看效果點這里，下載戳這里。

實現(xiàn)原理

a.外盒子div.cell，一個字的寬和高，超過不顯示，確保只能顯示一個字。

b.內(nèi)盒子div.num,一個字的寬，行高一個字高，我們通過這個盒子的移動實現(xiàn)動畫。

c.內(nèi)盒子的移動動畫的animation-timing-function使用step

d.倒計時結(jié)束，外盒子動畫消失掉

實現(xiàn)過程

好的，來看看實現(xiàn)過程，html文件是這樣的，中文的倒計時也可以，不過中文的網(wǎng)絡字體太少，所以沒弄，感興趣的同學可以弄起來。

[html] view plaincopy

 

1. <div class="cell">  
2.   <div class="num">5 4 3 2 1 0</div>  
3.   <!--<div class="num">五 四 三 二 一 零</div>-->  
4. </div>  

CSS部分使用prefix free和normailize，另外為了實現(xiàn)英文字體，我們用了google字體，你需要導入這個文件

http://fonts.googleapis.com/css?family=Allura|Frijole|Varela+Round

[css] view plaincopy

 

1. body{  
2.   background:#333;  
3. }  
4. .cell{  
5.     width: 1em;    
6.     height: 1em;  
7.     border:1px dashed rgba(255,255,255,0.1);  
8.     font-size:120px;  
9.     font-family:Frijole;  
10.     overflow: hidden;  
11.     position:absolute;  
12.     top:50%;  
13.     left:50%;  
14.     margin:-0.5em 0 0  -0.5em;  
15.     opacity:0;  
16.     animation:go 6s;  
17.     transform-origin:left bottom;  
18. }  
19. .num{  
20.     position:absolute;  
21.     width: 1em;  
22.     color:#E53F39;  
23.     line-height: 1em;    
24.     text-align: center;  
25.     text-shadow:1px 1px 2px rgba(255,255,255,.3);  
26.     animation:run 6s steps(6);  
27. }  
28. @keyframes run{  
29.     0%{top:0;}  
30.     100%{top:-6em;}  
31. }  
32. @keyframes go{  
33.   0%   {opacity:1;}  
34.   84%  {opacity:1;transform:rotate(0deg) scale(1);}  
35.   100% {opacity:0;transform:rotate(360deg) scale(.01);}  
36. }  

嗯，完工！