51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
CSS样式
当前位置:首页>实用代码>CSS样式>

纯CSS实现倒计时动画

时间:2017-08-15 09:39点击:
OK,CSS3演武场今天继续,我们重点来看看css3 animation实现逐帧动画,额,按照惯例,看效果点这里,下载戳这里。
实现原理

a.外盒子div.cell,一个字的宽和高,超过不显示,确保只能显示一个字。

b.内盒子div.num,一个字的宽,行高一个字高,我们通过这个盒子的移动实现动画。

c.内盒子的移动动画的animation-timing-function使用step

d.倒计时结束,外盒子动画消失掉
实现过程

好的,来看看实现过程,html文件是这样的,中文的倒计时也可以,不过中文的网络字体太少,所以没弄,感兴趣的同学可以弄起来。

<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


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


嗯,完工!

51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开