純CSS實現倒計時動畫

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字體，你需要導入這個文件
http://fonts.googleapis.com/css?family=Allura|Frijole|Varela+Round

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);}
}

嗯，完工！
-
前端開發whqet，關注web前端開發技術，分享網頁相關資源。 -