如何实现打字机效果？

纯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');

遇到 Uncaught TypeError: Cannot set property 'textContent' of null 怎么办

这是 JS 打字机最常见的报错，根本原因不是代码写错，而是 DOM 元素还没加载完成，脚本就执行了。

• 确保脚本在 </body> 之前引入，或用 DOMContentLoaded 包裹
• 不要依赖 window.onload，它等所有资源（图片、CSS）加载完才触发，太晚
• 检查选择器是否写错：比如 getElementById('msg') 但 HTML 里是 id="message"
• 服务端渲染或框架（如 Vue/React）中，需确认元素挂载完成后再调用打字函数

光标闪烁不同步、文字卡顿、移动端失效？

这些问题通常不是动画本身的问题，而是浏览器渲染机制或设备性能导致的视觉偏差。

CSS 动画在低性能设备上容易掉帧，steps() 函数若参数不对会导致光标跳变；iOS Safari 对 border-right 闪烁支持不稳定，建议改用伪元素 + opacity 动画；长文本逐字 JS 渲染可能阻塞主线程，造成卡顿。

• 光标用 ::after 伪元素实现，动画用 opacity 替代 border 更可靠
• JS 方案中，超过 100 字建议用 requestIdleCallback 分片处理，避免阻塞渲染
• 禁用过渡动画的元素加 will-change: opacity 提升合成层性能
• 测试务必在真机上进行，尤其是 iOS，模拟器行为和真实体验差异很大

实际项目里，多数人卡在光标同步和移动端兼容上——这两个问题不靠调试器看不出来，得打开真机录屏一帧一帧比对。