HTML+CSS实现文字打字机效果，超简单教程！

想要为你的网站或应用添加一个炫酷的文字打字机效果吗？本文为你提供一份详细的HTML加CSS实现教程，让你轻松打造吸睛的文字呈现方式。核心在于利用CSS的`animation`属性和`steps()`函数，模拟文本逐字显示的效果，就像真实的打字机一样。教程将深入讲解如何设置HTML结构，编写CSS样式，包括关键的`typing`动画和光标闪烁动画`blink-caret`。同时，还会介绍如何调整打字速度、光标样式，以及实现多行文本的打字机效果。更进一步，教你如何通过JavaScript监听`animationend`事件，在动画结束后执行其他操作，提升用户体验。无论你是前端新手还是经验丰富的开发者，都能从中受益，为你的项目增添一份独特的魅力。

实现HTML文字打字机效果的核心在于使用CSS的animation属性与steps()函数控制文本逐字显示。具体步骤如下：1. 设置HTML结构，包含一个容器和文本元素；2. 使用CSS设置容器overflow:hidden并定义.typing-text样式，初始宽度为0，结合white-space: nowrap防止换行；3. 定义@keyframes typing动画，从width: 0过渡到width: 100%；4. 添加光标闪烁动画blink-caret，通过border-right模拟光标并控制颜色变化；5. 调整animation的持续时间控制速度，修改border-right属性改变光标样式；6. 对于多行文本，将每行封装在span中，并设置不同的animation-delay实现顺序打字效果；7. 通过JavaScript监听animationend事件，在动画结束后执行其他操作，如显示按钮或加载内容。整个过程需确保steps()中的字符数与实际文本匹配，以保证动画流畅准确。

实现HTML中的文字打字机效果，核心在于利用CSS的animation动画控制文本的显示，模拟逐字呈现的效果。简单来说，就是让文本一开始隐藏，然后逐渐显示，就像打字机一样。

解决方案：

要实现这个效果，你需要用到CSS的animation属性和steps()函数。steps()函数允许你将动画分割成多个离散的步骤，这非常适合模拟打字机的逐字显示效果。

1. HTML结构：

   
     
   Hello, world! This is a typing effect.
   

2. CSS样式：

   .typing-container {
     width: 100%; /* 或者你需要的宽度 */
     overflow: hidden; /* 隐藏超出容器的文本 */
   }
   
   .typing-text {
     white-space: nowrap; /* 防止文本换行 */
     overflow: hidden;
     border-right: .15em solid orange; /* 添加光标效果 */
     width: 0; /* 初始宽度为0 */
     animation: typing 4s steps(40, end) forwards, /* 4s是总时长，40是字符数 */
                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; }
   }

   这里的steps(40, end)，40对应的是文本的字符数（包括空格），end表示动画在每个步骤的结束时发生。forwards 确保动画结束后停留在最后一帧，即文本完全显示。blink-caret 则是光标闪烁的动画。

如何调整打字速度和光标样式？

调整打字速度主要修改animation: typing 4s steps(40, end) forwards中的4s。数值越小，速度越快。光标样式则可以通过修改.typing-text中的border-right属性，以及blink-caret动画中的颜色来调整。例如，改变颜色为蓝色：

.typing-text {
  border-right: .15em solid blue;
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: blue; }
}

另外，如果你的文本长度是动态的，你需要通过JavaScript来动态计算字符数，并更新CSS中的steps()函数的值。这能确保动画与文本长度同步，避免出现显示不全或过快完成的情况。

如何实现多行文本的打字机效果？

实现多行文本的打字机效果稍微复杂一些，因为你需要考虑换行的问题。一种方法是将文本分割成多个元素，每个包含一行文本，然后依次对每个应用打字机动画。

  

    First line of text.

    Second line of text.
  

CSS方面，你需要为每个设置不同的animation-delay，让它们依次出现。

.typing-text {
  /* 之前的样式 */
  display: inline-block; /* 关键：让span可以设置宽度 */
  width: 0;
}

.line1 {
  animation: typing 2s steps(20, end) forwards, blink-caret .75s step-end infinite;
}

.line2 {
  animation: typing 2s steps(21, end) forwards, blink-caret .75s step-end infinite;
  animation-delay: 2s; /* 延迟2秒开始 */
}

注意，这里的字符数需要根据每行的实际字符数进行调整。另外，你可能还需要调整容器的宽度，以适应多行文本的显示。

如何在打字机效果完成后执行其他操作？

如果你想在打字机效果完成后执行一些JavaScript代码，例如显示一个按钮或加载更多内容，你可以监听animationend事件。

const typingText = document.querySelector('.typing-text');

typingText.addEventListener('animationend', () => {
  // 在动画结束后执行的代码
  console.log('Typing animation finished!');
  // 例如，显示一个按钮
  document.getElementById('myButton').style.display = 'block';
});

确保你的HTML中存在一个id为myButton的元素，并且初始状态是隐藏的。

Click Me

这种方法允许你在打字机效果完成后，无缝地过渡到其他交互操作，提升用户体验。

理论要掌握，实操不能落！以上关于《HTML+CSS实现文字打字机效果，超简单教程！》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！