jQuery 逐字输出

CSS 本身不具备实现逐字输出的功能，这需要配合 JavaScript 来实现。以下是一个简单的实现方式：

html

<div class="text-reveal">
  这是一个逐字显示的文本示例。
</div>

css

.text-reveal {
  overflow: hidden;
  white-space: nowrap;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  const textReveal = document.querySelector('.text-reveal');
  const text = textReveal.textContent;
  textReveal.textContent = "";

  const speed = 75; // 每秒显示的字数
  let counter = 0;
  const typeText = setInterval(() => {
    if(counter <= text.length) {
      textReveal.textContent = text.slice(0, counter++);
    } else {
      clearInterval(typeText);
    }
  }, speed);
});

这段代码会在页面加载完成后，将 .text-reveal 元素中的文本逐字显示出来。speed 变量可以根据需要调整显示的速度。