HTML5怎么实现打字机效果_HTML5文字动画技巧-html教程-PHP中文网

HTML5怎么实现打字机效果_HTML5文字动画技巧

雪夜

发布： 2025-11-02 21:54:02

原创

422人浏览过

使用JavaScript定时操作DOM或CSS动画可实现网页文字逐字显示效果。通过拆分字符串并用setTimeout控制输出节奏，配合随机间隔、音效、换行处理等细节优化，提升打字机效果的真实感与交互体验。

html5怎么实现打字机效果_html5文字动画技巧

想让网页文字像打字机一样逐字出现？用HTML5配合CSS和JavaScript就能轻松实现。关键在于控制文字的逐个显示，结合定时器让体验更自然。

使用JavaScript控制字符逐个输出

最直接的方式是通过JavaScript操作DOM，将目标文本拆分成单个字符，再按一定间隔逐个添加到页面中。

示例代码：

<p id="typewriter"></p>

<script>
const text = "欢迎来到我的网页！";
const elem = document.getElementById("typewriter");
let index = 0;

function typeWriter() {
  if (index < text.length) {
    elem.textContent += text.charAt(index);
    index++;
    setTimeout(typeWriter, 100); // 每100毫秒打一个字
  }
}
typeWriter();
</script>

登录后复制

CSS动画模拟打字过程

如果不需要动态控制内容，可以用CSS的width或@keyframes来实现视觉上的打字效果。

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

查看详情

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

技巧是先隐藏文字溢出，再逐步展开容器宽度。

<style>
.typing {
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid #000;
  animation: typing 3s steps(30), blink 0.5s step-end infinite alternate;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes blink {
  to { border-color: transparent; }
}
</style>

<p class="typing">这是一段自动打出的文字</p>

登录后复制