数字跳动效果html,使用CSS3帧动画制作逼真的计数器动画特效

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

HTML结构

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

• 9
• 0
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

• 9
• 0
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 0

...

要注意上面的数字是首位循环的。还有上面的代码中，使用的是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添加一些渐变效果和透明遮罩，以及一些背景图片。

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