css如何实现倒计时翻页动画

css实现倒计时翻页动画的方法：首先设置外 盒子 和内盒子；然后内盒子的移动动画的【animation -t iming-function】使用step；最后倒计时结束，外盒子动画 消失 掉。

本教程操作环境：windows7系统、css3版，DELL G3 电 脑。

css实现倒计时翻页动画的方法：

实现原理

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

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

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

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

实现过程

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

[html] view pl ai n copy  
<div class="cell">  
  <div class="num">5 4 3 2 1 0</div>  
  <!--<div class="num">五 四 三 二 一 零</div>-->  
</div>

CSS部分使用 PR efix free和normailize，另外为了实现英文字体，我们用了 GOOGLE 字体，你需要导入这个文件

http://fonts.googleapis .COM /css?f ami ly=Allura|Frijole| VAR ela+Round

[css] view plain copy  
body{  
  background: # 333;  
}  
.cell{  
    width: 1em;    
    h ei ght: 1em;  
    border:1px dashed rgba(255,255,255,0.1);  
    font- Size: 120px;  
    font-f am ily:Frijole;  
    overflow: hidden;  
    pos IT ion:absolute;  
    top:50%;  
    left:50%;  
    m arg in:-0.5em 0 0  -0.5em;  
    opacity:0;  
    animation:go 6s;  
    transform-ori gin :left bottom;  
}  
.num{  
    position:absolute;  
    width: 1em;  
    color:#E53F39;  
    line-height: 1em;    
    text-align:  center ;  
    text -s hadow: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(0 deg ) scale(1);}  
  100% {opacity:0;transform:rotate( 360 deg) scale(.01);}  
}

相关教程推荐：CSS视频教程

以上就是css如何实现倒计时翻页动画的详细内容，更多请关注其它相关 文章 ！

总结

以上是 为你收集整理的 css如何实现倒计时翻页动画 全部内容，希望文章能够帮你解决 css如何实现倒计时翻页动画 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于css如何实现倒计时翻页动画的详细内容...