css如何實現倒數翻頁動畫

css實現倒數翻頁動畫的方法：首先設定外盒子和內盒子；然後內盒子的移動動畫的【animation-timing-function】使用step；最後倒數結束，外盒子動畫消失掉。

本教學操作環境：windows7系統、css3版，DELL G3電腦。

css實作倒數翻頁動畫的方法：

實作原理

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

b、內盒div.num，一個字的寬，行高一個字高，我們透過這個盒子的移動實現動畫。

c、內盒子的移動動畫的animation-timing-function使用step

d、倒數結束，外盒子動畫消失掉

#實現過程

好的，來看看實現過程，html檔案是這樣的，中文的倒數計時也可以，不過中文的網路字體太少，所以沒弄，有興趣的同學可以弄起來。

[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，另外為了實作英文字體，我們用了google字體，你需要匯入這個檔案

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

相關教學推薦：CSS影片教學

##

以上是css如何實現倒數翻頁動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！