网页打字机效果可通过四种方法实现：一、CSS @keyframes 配合 steps() 实现静态逐字显示与光标闪烁；二、JavaScript 递归 setTimeout 动态插入字符；三、Generator + async/await 实现可暂停/恢复的精细控制；四、CSS 自定义属性联动 JS，用 --char-count 和 ch 单位驱动响应式动画。
如果您希望在网页中实现文字逐字显示的打字机效果，可以通过纯 CSS 或结合 JavaScript 的方式控制字符输出节奏与视觉表现。以下是多种可直接使用的实现方法：
一、CSS @keyframes 实现静态文本打字机效果
该方法适用于内容固定、无需动态更新的场景，利用 monospace 字体 与 width + overflow + animation 配合模拟打字过程。
1、在 HTML 中定义一个容器元素，例如：<p id="typewriter">欢迎来到我的网站</p>。
2、为该元素设置 CSS 样式：指定字体为等宽字体、隐藏溢出内容、设置初始宽度为 0，并启用动画。
立即学习“前端免费学习笔记（深入）”；
3、定义 @keyframes typing 动画，从 width: 0 过渡到目标文本完整宽度（如 width: 100%），同时配合 steps() 函数确保字符逐个显现。
4、添加 border-right 属性并设置 animation: blink 0.75s step-end infinite 实现光标闪烁效果。
二、JavaScript 字符串遍历实现动态打字机效果
该方法支持任意字符串输入、可中断重置、兼容中文与符号，通过 setTimeout 控制每个字符的插入时机。
1、获取目标 DOM 元素，例如：const el = document.getElementById('typewriter');。
2、定义待显示文本及打字速度（毫秒），例如：const text = 'Hello World!'; const speed = 150;。
3、声明索引变量 let i = 0，并编写递归函数：每次将 text.substring(0, i) 赋值给元素 textContent，然后递增 i。
4、使用 setTimeout 调用自身，延迟时间为设定的 speed，并在 i === text.length 时停止调用。
三、JavaScript Generator + async/await 实现可控打字流程
该方法提供更高粒度的流程控制能力，支持暂停、恢复、跳过、重播等交互操作，基于 生成器函数 产出字符序列。
1、定义生成器函数 function* typeChars(str)，内部使用 for...of 遍历字符串并 yield 每个字符。
2、创建异步函数 async function runTypewriter(gen, el, delay = 120)，循环调用 gen.next() 并将返回值写入元素。
3、在每次 yield 后执行 await new Promise(r => setTimeout(r, delay)) 实现精确延时。
4、通过外部变量控制 runTypewriter 的执行状态，例如监听按钮点击事件触发 return 或重新启动。
四、CSS 自定义属性 + JavaScript 触发响应式打字效果
该方法将动画逻辑交由 CSS 处理，JS 仅负责传递参数，便于主题切换与性能优化，依赖 CSS 自定义属性（--text-width） 驱动动画进度。
1、在 CSS 中定义动画关键帧，使用 ch 单位映射字符数，例如：width: calc(var(--char-count, 0) * 1ch);。
2、HTML 元素添加 style="--char-count: 0;" 初始样式，并设置 transition: width 0.3s steps(1, end)。
3、JavaScript 获取文本长度后，动态更新自定义属性：el.style.setProperty('--char-count', text.length);。
4、确保元素字体为 font-family: monospace，以保障 1ch 精确对应单字符宽度。
