html怎么实现打字机效果？-html教程-PHP中文网

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

html怎么实现打字机效果？

用 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 方案能真正“一个字一个字地塞进去”，兼容性好，逻辑清晰。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

注意：直接操作 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  clearInterval(timer) };
}
// 使用：const tw = typewriter(document.getElementById('msg'), 'Hello world');