当前位置主页 > 资料库 > 前端教程 > 使用CSS3帧动画制作逼真的计数器动画特效

使用CSS3帧动画制作逼真的计数器动画特效

2015-03-10

查看演示 下载地址

在这篇文章中,我们将使用CSS3的帧动画来制作一种计数器效果。这个计数器的布局有一点像滚动的密码锁,通过CSS3@Keyframe,控制每一列数字的跳动,最右边的一列数字跳动10下后,中间的一列数字会跳动一下,中间的数字跳动10下,最左边的数字才会跳动一下。

HTML结构

这个有趣的计数器效果可以使用在许多地方。下面先来看看它的HTML结构:整个计数器需要3列滚轮数字,粉笔使用3个无序列表来构建它们,将这3个无序列表包裹在一个id为#timer的div中。

<div id="timer">
  <ul id="timer-tens">
  <li>9<li>0<li>1<li>2<li>3<li>4<li>5<li>6<li>7<li>8<li>9
  </ul>
  <ul id="timer-ones">
  <li>9<li>0<li>1<li>2<li>3<li>4<li>5<li>6<li>7<li>8<li>9<li>0
  </ul>
  ...
</div>                         
                            

要注意上面的数字是首位循环的。还有上面的代码中,使用的是HTML5的新特性-无序列表只书写开始标签而不用闭合标签。这里不能使用有序列表,因为大多数浏览器不不支持在有序列表上使用HTML5的这个新特性。

CSS样式

首先我们需要现在数字滚轮上的可见区域,我们对包裹容器div#timer设置样式:

div#timer { display: inline-block; height: 3.6rem; overflow: hidden; }                          
                            

div被设置为display: inline-block;,所以它会和文字处于同一行内。下面来看看计数器无序列表的样式:

div#timer ul { 
  display: inline-block; 
  list-style-type: none; 
  width: 2rem; 
  padding-left: 0; 
  margin-top: 0; 
  position: relative; 
  top: -1.3rem; 
  line-height: 32px; 
}                       
                            

代码十分简单,line-height属性和body样式相对应:

body { background: #000; color: #fff; text-align: center; font-size: 32px; }                             
                            

这两个值保证列表中的每一个数字的高度都是相等的。然后我们就可以使用CSS3的帧动画来制作计数器跳动效果。

@keyframes rollover {
  0% { top: -51px; }
  10% { top: -83px; }
  20% { top: -115px; }
  30% { top: -147px; }
  40% { top: -179px; }
  50% { top: -211px; }
  60% { top: -243px; }
  70% { top: -275px; }
  80% { top: -307px; }
  90% { top: -339px; }
  100% { top: -371px; }
}                              
                            

帧动画中的数字差表示所有的数字都跳动相同的距离,并且每个数字都显示在滚轮的中间。

为了制作一种机械跳动的感觉,这里我们自定义了easing曲线,并将它应用到没一步数字跳动动画中。

ul#timer-ones { animation: rollover 10s cubic-bezier(1.000, 0.005, 0.995, 0.090) infinite; }                              
                            

同样道理,将这种easing效果应用到十位数的滚轮上,只是动画时间变为了100秒。

ul#timer-tens { animation: rollover 100s cubic-bezier(1.000, 0.005, 0.995, 0.090) infinite; }                              
                            

上面就是最基本的CSS动画代码,另外,我们为了效果更好,还可以为div添加一些渐变效果和透明遮罩,以及一些背景图片。

到此,这个效果就做好了。你可以根据自己的需要对它进行扩展,稍微改一下就可以变成一个计时器。发挥想象,在你的网站上使用这个计数器来统计访问数量,下载次数等等。

查看演示 下载地址

Previous:
上一篇:使用纯CSS制作Pinterest样式的瀑布流图片列布局
Next:
下一篇:如何制作一个响应式的HTML5表格
返回顶部