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

时间2024-01-27 23:56:03发布访客分类CSS浏览1028

导读：收集整理的这篇文章主要介绍了css如何实现倒计时翻页动画，觉得挺不错的，现在分享给大家，也给大家做个参考。css实现倒计时翻页动画的方法：首先设置外盒子和内盒子；然后内盒子的移动动画的【animation-timing-function】使...

收集整理的这篇文章主要介绍了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);
}
  }