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视频教程
作者：coldplay.xixi
前言：当我们需要为鼠标悬停添加一个样式，都会使用hover伪类，通过它我们可以在鼠标移动到元素上时向此元素添加特殊的样式。比...
jquery获取li数量的方法：1、创建一个HTML示例文件；2、引入jquery库；3、通过“$(#questionUl li).length;”方法获取li即可。本...
注意：Bootstrap相关文件的路径，Bootstrap依赖jQuery，需要先加载jQueryindex.html：!DOCTYPE htmlhtml headmeta charset=UTF-8...
本篇文章给大家带来的内容是关于html(Css+DIV)使用集锦，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。1、ht...