首页 >web前端 >css教程 >css如何实现倒计时翻页动画

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

coldplay.xixi
coldplay.xixi原创
2021-03-12 16:58:284314浏览

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

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

本教程操作环境: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视频教程

以上是css如何实现倒计时翻页动画的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn