[分享]css3数字滚动循环样式

CSS3数字滚动循环样式可以让数字在页面中自动滚动，并且循环显示。这种样式常用于数字计数器、时钟等场景。/样式代码/ keyframes count { from { transform: trans...

CSS3数字滚动循环样式可以让数字在页面中自动滚动，并且循环显示。这种样式常用于数字计数器、时钟等场景。

/*样式代码*/
@keyframes count {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

.count {
  position: relative;
  height: 1em;
  overflow: hidden;
}

.count span {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  animation: count 2s infinite;
  font-size: 1.5em;
} 

以上代码中使用了CSS3的动画属性，通过关键帧实现数字向上滚动的效果。在HTML中添加需要显示的数字，可以使用span标签包裹，并将包裹数字内容的span标签放入一个class为count的div容器中，如下面的例子。

<div class="count">
  <span>123</span>
  <span>456</span>
  <span>789</span>
</div> 

当数字需要增加或减少时，只需要增加或删除span标签，并在CSS中修改动画的持续时间，就可以实现数字的滚动循环效果。