多个数字一起滚动特效html

要实现多个数字一起滚动特效，可以使用类似的方法，只需要将每个数字的动画分别实现即可。以下是一个例子：

HTML代码：

<div class="counter">
  <span class="count">0</span>
  <span class="count">0</span>
  <span class="count">0</span>
</div>

CSS代码：

.counter {
  font-size: 36px;
  font-weight: bold;
  text-align: center;
}

.count {
  display: inline-block;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  background-color: #333;
  color: #fff;
  margin: 10px;
}

JavaScript代码：

// 获取数字元素
var counts = document.querySelectorAll('.count');

// 定义目标数字和动画时间
var targets = [100, 200, 300];
var duration = 2000;

// 定义起始时间和起始数字
var start = null;
var current = [0, 0, 0];

// 定义动画函数
function animate(timestamp) {
  // 如果起始时间为空，则初始化起始时间
  if (!start) start = timestamp;

  // 计算经过时间和当前数字
  var progress = timestamp - start;
  var delta = progress / duration;
  for (var i = 0; i < counts.length; i++) {
    current[i] = Math.round(targets[i] * delta);
    // 如果当前数字小于目标数字，则继续动画
    if (current[i] < targets[i]) {
      counts[i].innerHTML = current[i];
    } else {
      // 否则，动画结束，显示目标数字
      counts[i].innerHTML = targets[i];
    }
  }

  // 如果还没到达目标数字，则继续动画
  if (current[0] < targets[0] || current[1] < targets[1] || current[2] < targets[2]) {
    requestAnimationFrame(animate);
  }
}

// 启动动画
requestAnimationFrame(animate);

这个例子中，我们在HTML中定义了多个数字元素，并使用CSS设置它们的样式。然后，我们使用JavaScript实现了一个数字变化的动画效果，从0逐渐增加到目标数字。需要注意的是，我们使用了一个循环来分别处理每个数字元素的动画，同时在动画结束后判断是否所有数字都到达了目标数字，如果没有，则继续动画。