index.html中的文字打字机效果实现：HTML5动画交互-html教程-PHP中文网

最简纯css打字机效果需用monospace字体、white-space:nowrap、overflow:hidden、display:inline-block及width从0到100%或具体ch值的@keyframes动画，光标用::after伪元素配合blink动画实现。

index.html中的文字打字机效果实现：html5动画交互

用 CSS @keyframes 实现最简打字机效果

纯 CSS 方案足够应对大多数静态文本场景，无需 JS 介入，兼容性好且性能轻量。核心是利用 monospace 字体、white-space: nowrap 和 overflow: hidden 配合宽度从 0 到 100% 的动画。

常见错误是直接对 width 做动画却没设 display: inline-block 或 inline-flex，导致动画无效；另一个坑是用了非等宽字体，光标闪烁和字符推进不同步。

必须给文字容器设 font-family: monospace（如 Consolas, ui-monospace）
容器需设 white-space: nowrap + overflow: hidden + display: inline-block
动画关键帧中，width 从 0 到 fit-content 不被支持，改用具体字符数对应宽度（如 12ch）或 100%（配合 max-width 限制）
光标用伪元素 ::after 实现，content: "|" + animation: blink 1s step-end infinite

@keyframes type {
  from { width: 0 }
  to { width: 14ch } /* "Hello World!" 共12字符，+2留白 */
}
.typewriter {
  font-family: ui-monospace;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  animation: type 2.5s steps(14, end), blink 0.75s step-end infinite;
}
.typewriter::after {
  content: "|";
  animation-name: blink;
}

用 JavaScript 动态控制打字节奏与中断

CSS 方案无法响应用户交互（比如鼠标悬停暂停、点击跳过），此时必须上 JS。关键不是“逐字插入”，而是用 setTimeout 或 requestAnimationFrame 控制字符输出时机，并维护一个可取消的执行上下文。

容易踩的坑包括：未清除定时器导致重复触发、字符串含 HTML 标签时直接 innerHTML 插入引发 XSS、未处理退格或富文本格式。

用 let i = 0 计数，每次递增后检查 i ，避免越界
暂停/恢复需保存当前 i 和调用 clearTimeout / 重新 setTimeout
若文本含 <span></span> 等标签，先用 document.createElement 解析再追加，别用 innerHTML +=
想支持“删除重打”，得额外维护一个 isDeleting 状态和反向计数逻辑

function typewriter(el, text, delay = 100) {
  let i = 0;
  let timeoutId;
  function tick() {
    if (i  clearTimeout(timeoutId); // 返回清理函数
}
// 使用
const cleanup = typewriter(document.querySelector('.js-typewriter'), 'Loading...');
// 悬停暂停
el.addEventListener('mouseenter', cleanup);