小编给大家分享一下css怎么实现倒计时翻页动画,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
css实现倒计时翻页动画的方法:首先设置外盒子和内盒子;然后内盒子的移动动画的【animation-timing-function】使用step;最后倒计时结束,外盒子动画消失掉。
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怎么实现倒计时翻页动画”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。