[分享]css3数字累加动画

CSS3数字累加动画

.numbers {
  font-size: 3em;
  font-weight: bold;
}

.numbers span {
  display: inline-block;
  width: 1em;
  margin-right: 0.1em;
  text-align: center;
  background-color: #eee;
  animation: increase 2s ease-in-out both;
}

@keyframes increase {
  from {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  to {
    transform: translateY(-1em) scale(1.5);
    opacity: 1;
  }
} 

实现数字累加动画的方法是使用CSS3的动画和逐帧。首先，我们需要将数字用span标签包裹起来，并设置一些样式。然后，我们使用@keyframes关键字定义一个动画，在其中定义数字从0到目标值的逐渐增加过程。最后，我们将这个动画作用于span标签上，使数字逐步“跳”出来。

此外，我们还可以使用JavaScript在页面加载时动态设置数字的目标值，而不需要手动修改HTML代码。