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中添加一个空容器，例如：<div id="typewriter-output"></div>。

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

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

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

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

百度文心百中

百度大模型语义搜索体验中心

263

查看详情

三、采用CSS自定义属性与伪元素组合模拟光标

该方法不依赖JavaScript，仅用CSS即可构建具备闪烁光标和文本渐进显示的视觉效果。通过::after伪元素生成光标，并利用content与animation联动控制其显隐节奏。

1、为文本容器设置position: relative，确保伪元素定位准确。

2、定义::after伪元素，设置content: "|"、position: absolute、right: 0、top: 0、color: black及font-family: monospace。

3、创建名为cursor-blink的@keyframes，在0%, 100%设为opacity: 1，在50%设为opacity: 0。

4、将animation: cursor-blink 1s step-end infinite应用于伪元素，使其按帧切换可见性。

5、将文本容器的width动画与伪元素动画同步，确保光标始终停驻在最后一个已显示字符右侧。

四、使用CSS mask-image配合动画实现遮罩式打字效果

该方法通过mask-image裁剪文本，使内容从左至右线性显现，视觉上更接近真实打字机的机械推进感。适用于现代浏览器且支持mask特性的环境。

1、为文本元素设置-webkit-mask-image: linear-gradient(to right, black 0%, black 50%, transparent 50%, transparent 100%)。

2、将-webkit-mask-size设为200% 100%，以便后续位移控制。

3、定义@keyframes mask-shift，从mask-position: 100% 0过渡到mask-position: 0 0，覆盖整个文本宽度。

4、应用动画时指定animation: mask-shift 2s steps(11, end)，其中steps(11, end)确保每步对应一个字符宽度。

5、配合font-family: monospace与固定ch单位宽度（如width: 11ch），保障遮罩移动精度。

以上就是HTML如何实现打字机效果_CSS动画逐步显示教程【技巧】的详细内容，更多请关注php中文网其它相关文章！