css如何实现倒计时翻页动画-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

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

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);}  }

登录后复制