纯CSS实现倒计时动画

梦里梦外; 2022-08-25 08:44 221阅读 0赞

OK，CSS3演武场今天继续，我们重点来看看css3 animation实现逐帧动画，额，按照惯例，看效果点[这里][Link 1]，下载戳[这里][Link 2]。

## 实现原理 ##

a.外盒子div.cell，一个字的宽和高，超过不显示，确保只能显示一个字。

b.内盒子div.num,一个字的宽，行高一个字高，我们通过这个盒子的移动实现动画。

c.内盒子的移动动画的animation-timing-function使用step

d.倒计时结束，外盒子动画消失掉

## 实现过程 ##

好的，来看看实现过程，html文件是这样的，中文的倒计时也可以，不过中文的网络字体太少，所以没弄，感兴趣的同学可以弄起来。

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][whqet]，关注web前端开发技术，分享网页相关资源。  
\---------------------------------------------------------------

[Link 1]: http://codepen.io/whqet/pen/qgtzH
[Link 2]: http://codepen.io/whqet/share/zip/qgtzH
[whqet]: http://blog.csdn.net/whqet