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

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

css實(shí)現(xiàn)倒計(jì)時(shí)翻頁(yè)動(dòng)畫的方法：

實(shí)現(xiàn)原理

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

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

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

d、倒計(jì)時(shí)結(jié)束，外盒子動(dòng)畫消失掉

實(shí)現(xiàn)過程

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

[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，另外為了實(shí)現(xiàn)英文字體，我們用了google字體，你需要導(dǎo)入這個(gè)文件

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視頻教程