css怎么實(shí)現(xiàn)倒計(jì)時(shí)翻頁動畫

小編給大家分享一下css怎么實(shí)現(xiàn)倒計(jì)時(shí)翻頁動畫，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)公司主要從事網(wǎng)站制作、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)合江,十年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

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

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

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

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

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

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

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

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

好的，來看看實(shí)現(xiàn)過程，html文件是這樣的，中文的倒計(jì)時(shí)也可以，不過中文的網(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，另外為了實(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);}  
}

看完了這篇文章，相信你對“css怎么實(shí)現(xiàn)倒計(jì)時(shí)翻頁動畫”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

分享標(biāo)題：css怎么實(shí)現(xiàn)倒計(jì)時(shí)翻頁動畫
轉(zhuǎn)載來于：http://bm7419.com/article38/jcsppp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)站營銷、小程序開發(fā)、品牌網(wǎng)站設(shè)計(jì)、App開發(fā)、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)