如何实现网站加载时打字机风格的文字逐字展开效果？

以下两种是实际项目中最常用的实现方式，可根据你的场景按需选择：

方案1：纯CSS实现（适合固定长度的静态文本） #

不需要引入JS，性能最优，仅适合提前知道文本字数的场景：

• 首先写HTML结构：

<div class="typewriter">
  欢迎来到我的落地页
</div>

• 然后写CSS样式：

.typewriter {
  /* 必须保证文本不折行 */
  white-space: nowrap;
  /* 溢出内容隐藏 */
  overflow: hidden;
  /* 模拟打字机光标 */
  border-right: 3px solid #333;
  /* 逐字动画：10个字符就填steps(10)，和实际文本字数对应，时长按需调整 */
  animation: typing 3s steps(10, end), blink-caret 0.75s step-end infinite;
}

/* 打字动画：控制宽度从0到100% */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* 光标闪烁动画 */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #333 }
}

注意：steps()里的第一个参数要和你的实际文本字数保持一致，否则会出现动画和文字不匹配的问题。

方案2：JavaScript实现（适合动态/可变长度文本，灵活度更高） #

不需要提前统计字数，支持自定义打字速度、打字完成后的回调逻辑，适配各种场景：

• HTML结构：

<div id="typewriter-text"></div>

• JS代码：

// 要展示的文本
const text = "欢迎来到我的落地页，这里有你需要的全部信息";
// 打字速度，单位毫秒，数值越小打字越快
const speed = 150;
let index = 0;
const typewriterElement = document.getElementById("typewriter-text");

function type() {
  if (index < text.length) {
    // 每次追加一个字符
    typewriterElement.innerHTML += text.charAt(index);
    index++;
    // 按设定的速度递归调用
    setTimeout(type, speed);
  }
}

// 页面加载完成后触发打字效果
window.onload = type;

• 如果需要加光标闪烁效果，可以给对应元素加和方案1一样的光标CSS样式即可。

额外适配说明 #

• 如果文本包含emoji等特殊字符，JS拆分字符时可以把text.charAt(index)替换为Array.from(text)[index]，避免乱码
• 需要暂停、重启动画的场景，优先选择JS方案实现

内容的提问来源于stack exchange，提问作者NewFace12