HTML打字机效果实现教程

想要为你的网站增添一丝复古与科技感？本文为你揭秘HTML打字机效果的实现方法，无论是使用CSS的animation属性配合steps()函数，还是JavaScript的setTimeout递归调用，都能轻松实现文字逐个显示的动画效果。文章详细讲解了两种方案的具体代码实现，并提供了添加打字音效和光标闪烁效果的技巧，让你的打字机效果更逼真。此外，还介绍了如何实现删除效果，模拟打字错误后退修改的场景。打字机效果广泛应用于欢迎语展示、加载提示和终端模拟等场景，适用于个人博客、作品集或教程演示，助你提升网站的视觉吸引力，让用户眼前一亮！

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

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

解决方案：

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

标签或者标签。然后，利用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函数，每次向

标签中添加一个字符。通过调整speed变量，可以改变打字的速度。

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

除了文字显示，还可以添加声音和光标效果来增强真实感。声音可以通过HTML5的标签实现，在每次显示一个字符时播放一个打字的声音。光标效果可以使用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();

这个例子中，isDeleting变量控制是添加还是删除文字。当isDeleting为false时，添加文字；当isDeleting为true时，删除文字。

打字机效果在实际项目中有哪些应用场景？

打字机效果常用于展示欢迎语、加载提示或者模拟终端输出等场景。例如，在个人博客或作品展示页面，可以使用打字机效果来吸引用户的注意力，增加页面的趣味性。在一些需要模拟终端操作的场景，比如教程或演示程序中，打字机效果可以更直观地展示命令的输入过程。

本篇关于《HTML打字机效果实现教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！