在这篇文章中，我们将使用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添加一些渐变效果和透明遮罩，以及一些背景图片。
到此，这个效果就做好了。你可以根据自己的需要对它进行扩展，稍微改一下就可以变成一个计时器。发挥想象，在你的网站上使用这个计数器来统计访问数量，下载次数等等。
