html数字滚动特效

HTML数字滚动特效可以通过CSS和JavaScript实现。以下是一个简单的例子：

HTML代码：

<div class="counter">
  <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 count = document.querySelector('.count');

// 定义目标数字和动画时间
var target = 100;
var duration = 2000;

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

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

  // 计算经过时间和当前数字
  var progress = timestamp - start;
  var delta = progress / duration;
  current = Math.round(target * delta);

  // 如果当前数字小于目标数字，则继续动画
  if (current < target) {
    count.innerHTML = current;
    requestAnimationFrame(animate);
  } else {
    // 否则，动画结束，显示目标数字
    count.innerHTML = target;
  }
}

// 启动动画
requestAnimationFrame(animate);

这个例子中，我们定义了一个包含一个数字元素的容器，并使用CSS设置数字元素的样式。然后，我们使用JavaScript实现了一个数字变化的动画效果，从0逐渐增加到目标数字。你可以根据需要修改数字、时间和样式等参数，实现不同的数字滚动特效。