脚本宝典收集整理的这篇文章主要介绍了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);} }
相关教程推荐:CSS视频教程
以上就是css如何实现倒计时翻页动画的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的css如何实现倒计时翻页动画全部内容,希望文章能够帮你解决css如何实现倒计时翻页动画所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。