使用javaScript控制字符逐字输出，结合css光标闪烁动画，可实现网页打字机效果。示例代码通过定时器递增显示文本，每100毫秒添加一个字符，并用::after伪元素配合@keyframes创建闪烁光标。进阶功能包括多行文本循环、回删效果及暂停控制，需管理文本状态与递归调用。为提升体验，应适配打字速度、分段展示长文本、提供跳过按钮，并考虑视觉敏感用户需求。核心在于节奏控制，细节如光标兼容性和中断处理需注意。
想让网页上的文字像打字机一样逐字出现？这种效果不仅能吸引用户注意，还能提升页面的交互感。实现方式其实不难，用 html5、CSS 和 javascript 就能轻松完成。
使用 JavaScript 控制文本逐字显示
核心思路是通过 JavaScript 定时将字符追加到页面元素中，模拟打字过程。
示例代码：
<p id="typewriter"></p> <script> const text = "欢迎来到我的网页，一起探索前端的奇妙世界！"; let index = 0; const typewriter = document.getElementById("typewriter"); function type() { if (index < text.length) { typewriter.textContent += text.charAt(index); index++; setTimeout(type, 100); // 每100毫秒打一个字 } } type(); // 启动打字效果 </script>
这个方法灵活，可以自定义打字速度、内容，甚至加入光标闪烁效果。
立即学习“前端免费学习笔记（深入）”；
添加光标闪烁动画（CSS 实现）
为了让效果更真实，可以在文字末尾加一个闪烁的光标。
使用 CSS 的 @keyframes 来实现：
#typewriter::after { content: "|"; animation: blink 0.7s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
这样光标会持续闪烁，直到打字结束。如果需要打字结束后光标消失，可在 JavaScript 中打字完成后移除伪元素或修改样式。
支持多行文本与回删效果
进阶玩法：模拟真实打字机，写完一段后回删，再写下一段。
实现逻辑：
- 准备多个句子，按顺序显示
- 每句打完后暂停
- 然后逐个删除字符
- 再开始下一句
关键在于控制状态和调用递归函数，配合 setTimeout 或 setInterval 精确控制节奏。
性能与用户体验建议
虽然动画很酷，但要注意几点：
- 避免在移动设备上设置过快或过慢的打字速度
- 长文本建议分段展示，防止用户等待太久
- 可提供“跳过动画”按钮，提升可用性
- 考虑关闭动画的选项，照顾有视觉敏感的用户
基本上就这些。打字机效果看似复杂，其实核心就是控制字符串的输出节奏。结合 CSS 动画，就能做出既美观又流畅的文字动画。不复杂但容易忽略细节，比如光标兼容性和文本中断处理。掌握基础后，可以自由扩展出更多创意玩法。