HTML如何实现打字机效果？文字逐个显示怎么做？-html教程-PHP中文网

HTML如何实现打字机效果？文字逐个显示怎么做？

煙雲

发布： 2025-08-16 19:26:01

原创

548人浏览过

打字机效果可通过css或javascript实现，首先使用css的animation属性配合steps()控制宽度变化并添加光标闪烁动画，或使用javascript通过settimeout递归逐字添加文本，实现逐个显示效果；可通过调整steps参数或speed变量控制速度，加入audio标签播放打字音效增强真实感，利用border-right和animation实现光标闪烁；删除效果可通过javascript设置isdeleting标志位，在文字显示完成后暂停并反向删除，再循环执行；应用场景包括欢迎语展示、加载提示、终端模拟等，常用于个人博客、作品集或教程演示中以提升视觉吸引力。

HTML如何实现打字机效果？文字逐个显示怎么做？

HTML实现打字机效果，核心在于控制文字逐个显示。这可以通过CSS动画和JavaScript来实现，让文字像老式打字机一样，一个字一个字地显示出来。

解决方案：

首先，我们需要一个HTML元素来承载文本，比如一个

<p>

登录后复制

标签或者

<span>

登录后复制

标签。然后，利用CSS来隐藏超出容器宽度的文本，并通过JavaScript来逐步增加容器的宽度，从而让文字逐个显示。

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

<p id="typewriter">这是一段需要打字机效果的文字。</p>

<style>
#typewriter {
  width: 0;
  overflow: hidden;
  white-space: nowrap; /* 防止文本换行 */
  border-right: .15em solid orange; /* 光标效果 */
  animation: typing 3s steps(40, end), /* steps(字符总数, end) */
             blink-caret .75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}
</style>

登录后复制

这段代码的关键在于

animation

登录后复制

属性。

typing

登录后复制

动画控制了容器宽度的变化，

steps(40, end)

登录后复制

确保动画以40步完成（假设文本有40个字符），

blink-caret

登录后复制

动画则模拟了光标闪烁的效果。当然，这里的字符总数需要根据你的实际文本长度进行调整。

JavaScript方案：

如果你需要更精细的控制，比如在特定时刻暂停或改变打字速度，JavaScript会更灵活。

<p id="typewriterJS"></p>

<script>
const text = "这是一段需要打字机效果的文字。";
const speed = 50; // 打字速度，单位：毫秒
let i = 0;

function typeWriter() {
  if (i < text.length) {
    document.getElementById("typewriterJS").innerHTML += text.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}

typeWriter();
</script>

登录后复制

这段JavaScript代码使用

setTimeout

登录后复制

函数递归调用

typeWriter

登录后复制

函数，每次向

<p>

登录后复制

标签中添加一个字符。通过调整

speed

登录后复制

变量，可以改变打字的速度。

阿里云-虚拟数字人

阿里云-虚拟数字人是什么？ ...

查看详情

如何让打字机效果更逼真？加入声音和光标效果？

除了文字显示，还可以添加声音和光标效果来增强真实感。声音可以通过HTML5的

<audio>

登录后复制

标签实现，在每次显示一个字符时播放一个打字的声音。光标效果可以使用CSS的

border-right

登录后复制

属性，并配合

animation

登录后复制

属性实现闪烁效果，就像上面CSS方案中那样。

如何实现删除效果，模拟打字错误后退修改？

要实现删除效果，可以在打字机效果的基础上，添加一个删除的动画。首先，让文字正常显示，然后暂停一段时间，再开始逐个删除文字。这可以通过JavaScript来实现，控制文字的添加和删除，并配合

setTimeout

登录后复制

函数来控制动画的节奏。

const text = "这是一段需要打字机效果的文字。";
const speed = 50; // 打字速度
const deleteSpeed = 30; // 删除速度
let i = 0;
let isDeleting = false;

function typeWriter() {
  const element = document.getElementById("typewriterJS");
  if (!isDeleting && i <= text.length) {
    element.innerHTML = text.substring(0, i);
    i++;
    setTimeout(typeWriter, speed);
  } else if (isDeleting && i >= 0) {
    element.innerHTML = text.substring(0, i);
    i--;
    setTimeout(typeWriter, deleteSpeed);
  } else {
    isDeleting = !isDeleting;
    setTimeout(typeWriter, 1000); // 暂停1秒后开始下一个循环
  }
}

typeWriter();

登录后复制

这个例子中，