如何实现打字机效果？

作者：袖梨 2026-06-16

纯CSS打字机效果需用等宽字体、overflow:hidden、white-space:nowrap，width从0到Nch动画配合steps()，光标用border-right或伪元素opacity实现；JS方案则通过递归setTimeout逐字插入textContent，注意DOM加载时机和XSS防护。

用 CSS `@keyframes` 实现基础打字机效果

纯 CSS 方案最轻量，适合静态文本或内容不常变的场景。核心是控制 width 从 0 到目标宽度，并配合 overflow: hidden 和等宽字体模拟逐字出现。

关键点：必须用等宽字体（如 monospace），否则光标位置会漂移；white-space: nowrap 防止换行打断动画；动画时长需按字符数动态计算，否则太快/太慢都失真。

给元素设 font-family: monospace、overflow: hidden、white-space: nowrap
用 ch 单位定义 width 动画终点（1 ch ≈ 1 个等宽字符宽度）
动画时长建议按字符数 × 0.05s～0.08s 计算，例如 20 字设 1.2s
加 border-right 模拟光标，用 steps() 或 ease-in-out 让闪烁更自然

@keyframes typewriter {  from { width: 0; }  to { width: 20ch; } /* 假设文本共 20 字 */}.typewriter {  font-family: monospace;  overflow: hidden;  white-space: nowrap;  border-right: 1px solid;  animation: typewriter 1.2s steps(20, end), blink 0.75s step-end infinite;}

用 JavaScript `setTimeout` 精确控制逐字输出

需要动态内容、暂停/重播/中断交互，或文本含 HTML 标签时，CSS 方案就力不从心了。JS 方案能真正“一个字一个字地塞进去”，兼容性好，逻辑清晰。

注意：直接操作 innerHTML 有 XSS 风险；若文本来自用户输入，必须先做 textContent 赋值或转义；频繁 DOM 操作影响性能，长文本建议用 document.createTextNode 批量插入。

立即学习“前端免费学习笔记（深入）”；

把目标文本拆成数组：text.split('')
用递归 setTimeout 或 setInterval 控制节奏，每次追加一个字符
用 element.textContent = currentText 替代 innerHTML，避免标签被解析
返回一个对象，包含 pause()、resume()、stop() 方法便于控制

function typewriter(element, text, delay = 80) {  let i = 0;  const timer = setInterval(() => {    if (i < text.length) {      element.textContent += text[i++];    } else {      clearInterval(timer);    }  }, delay);  return { stop: () => clearInterval(timer) };}// 使用：const tw = typewriter(document.getElementById('msg'), 'Hello world');