css實現(xiàn)倒計時翻頁動畫的方法：首先設(shè)置外盒子和內(nèi)盒子；然后內(nèi)盒子的移動動畫的【animation-timing-function】使用step；最后倒計時結(jié)束，外盒子動畫消失掉。

本教程操作環(huán)境：windows7系統(tǒng)、css3版，DELL G3電腦。

css實現(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)絡(luò)字體太少，所以沒弄，感興趣的同學(xué)可以弄起來。

[html] view plain copy   <div class="cell">     <div class="num">5 4 3 2 1 0</div>     <!--<div class="num">五 四 三 二 一 零</div>-->   </div>

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

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

[css] view plain copy   body{     background:#333;   }   .cell{       width: 1em;         height: 1em;       border:1px dashed rgba(255,255,255,0.1);       font-size:120px;       font-family:Frijole;       overflow: hidden;       position:absolute;       top:50%;       left:50%;       margin:-0.5em 0 0  -0.5em;       opacity:0;       animation:go 6s;       transform-origin:left bottom;   }   .num{       position:absolute;       width: 1em;       color:#E53F39;       line-height: 1em;         text-align: center;       text-shadow:1px 1px 2px rgba(255,255,255,.3);       animation:run 6s steps(6);   }   @keyframes run{       0%{top:0;}       100%{top:-6em;}   }   @keyframes go{     0%   {opacity:1;}     84%  {opacity:1;transform:rotate(0deg) scale(1);}     100% {opacity:0;transform:rotate(360deg) scale(.01);}   }

相關(guān)教程推薦：CSS視頻教程