html中怎么实现文字打字机效果 animation动画-html教程-PHP中文网

html中怎么实现文字打字机效果 animation动画

冰火之心

发布： 2025-06-28 08:30:02

原创

590人浏览过

实现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中怎么实现文字打字机效果 animation动画

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

解决方案：

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

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

HTML结构：

<div class="typing-container">
  <p class="typing-text">Hello, world! This is a typing effect.</p>
</div>

登录后复制

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()函数的值。这能确保动画与文本长度同步，避免出现显示不全或过快完成的情况。

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

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

<div class="typing-container">
  <p>
    <span class="typing-text line1">First line of text.</span><br>
    <span class="typing-text line2">Second line of text.</span>
  </p>
</div>

登录后复制

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的元素，并且初始状态是隐藏的。

<button id="myButton" style="display:none;">Click Me</button>

登录后复制

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

以上就是html中怎么实现文字打字机效果 animation动画的详细内容，更多请关注php中文网其它相关文章！