[分享]CSS3数字滚动动画

CSS3数字滚动动画可以通过CSS3的属性和动画实现数字的滚动效果。

/* HTML */
<div class="counter">1200</div>

/* CSS */
.counter {
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  border: 1px solid #ccc;
  width: 100px;
  height: 50px;
  margin: 20px auto;
  animation: rolling 2s linear infinite;
}

@keyframes rolling {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
} 

上述代码中，首先定义了一个div元素，class为counter，显示数字1200。接下来在CSS中定义counter样式，设置文字大小、粗细、对齐方式以及边框大小等属性。然后通过animation属性触发rolling动画，设置持续时间2秒，线性运动方式，无限循环。

最后，在rolling动画中，通过transform属性设置位移动画，从0%的位置到100%的位置，垂直方向上移动100%的距离，即向上滚动一个数字的高度。

通过上述CSS样式和动画设置，可以轻松实现数字滚动动画效果，让页面更加生动有趣。