css计时动画,纯CSS实现倒计时动画

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

实现原理

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

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

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

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

实现过程

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

5 4 3 2 1 0CSS部分使用prefix free和normailize，另外为了实现英文字体，我们用了google字体，你需要导入这个文件

https://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前端开发技术，分享网页相关资源。

---------------------------------------------------------------