HTML如何实现打字机效果_CSS动画逐步显示教程【技巧】

可通过CSS动画、JavaScript动态插入、CSS伪元素光标或mask-image遮罩四种方法实现打字机效果：一用width+steps逐显；二用定时器逐字添加；三用::after伪元素模拟闪烁光标；四用mask-image线性遮罩推进。

如果您希望网页中的文字像老式打字机一样逐字显示，则可以通过CSS动画结合特定的字符串截断与宽度控制实现。以下是实现此效果的具体步骤：

一、使用CSS @keyframes定义字符逐显动画

该方法通过设置元素的width从0开始逐步扩展至完整文本宽度，并配合overflow: hidden隐藏超出部分，从而模拟打字过程。需预先设定容器宽度并启用等宽字体以保证节奏稳定。

1、在HTML中创建一个包含目标文本的<span></span>或<p></p>元素，例如：<p class="typewriter">Hello World</p>。

2、在CSS中定义.typewriter类，设置font-family: monospace、overflow: hidden、white-space: nowrap及固定宽度（如width: 12em）。

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

3、使用@keyframes声明名为typing的动画，从width: 0过渡到width: 12em，持续时间设为2s，并添加steps(11, end)使动画按字符数分步执行（11为“Hello World”含空格的字符总数）。

4、将动画应用到.typewriter类，设置animation: typing 2s steps(11, end), blink-caret 0.75s step-end infinite，其中blink-caret为光标闪烁动画。

二、利用JavaScript动态插入字符实现精确控制

该方法通过定时器逐个向DOM节点追加字符，适用于需要响应用户交互、动态加载文本或兼容老旧浏览器的场景。可自由控制速度、暂停、重播等行为。

1、在HTML中添加一个空容器，例如：<p id="typewriter-output"></p>。

2、准备待显示的字符串，如const text = "Hello World";。

3、定义变量let index = 0;用于记录当前已插入字符数，并设置毫秒级延迟（如const delay = 150;）。

4、编写递归函数type()：若index ，则向容器内插入<code>text[index]，index++，再调用setTimeout(type, delay)；否则停止。

5、页面加载完成后调用type()启动打字流程。

标签： css javascript java html 伪元素 浏览器 递归函数 css动画 overflow