CSS打字机效果：如何优雅地停止闪烁光标与居中文本

本教程深入探讨CSS打字机效果的实现与优化。我们将学习如何通过CSS动画精确控制文本的逐字显示，并重点解决在文本输入完成后，如何优雅地停止闪烁光标的问题。同时，文章还将介绍如何调整文本对齐方式，以实现更美观的视觉呈现，确保动画效果的完整性和专业性。

CSS打字机效果基础：原理与实现

CSS打字机效果通过模拟真实打字过程，逐字显示文本，并通常伴随一个闪烁的光标。其核心原理是利用CSS的overflow: hidden、white-space: nowrap以及width动画来控制文本的显示范围，结合border-right属性模拟光标。

让我们先看一个典型的打字机效果实现代码：

<p class="col-twelve">
   <h5>print("Hello, World!")</h5>
</p>

登录后复制

.col-twelve h5 {
  overflow: hidden; /* 确保内容在动画完成前不显示 */
  border-right: 0.15em solid orange; /* 模拟打字机光标 */
  white-space: nowrap; /* 保持内容在单行 */
  margin: 0 auto; /* 使其在父容器中水平居中 */
  letter-spacing: 0.15em; /* 调整字间距 */
  animation: typing 3.5s steps(50, end) forwards,
    blink-caret 0.75s step-end infinite; /* 应用打字和光标闪烁动画 */
}

/* 打字动画：逐渐增加宽度以显示文本 */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 35%; /* 动画结束时的宽度，应覆盖所有文本 */
  }
}

/* 光标闪烁动画：控制边框颜色实现闪烁 */
@keyframes blink-caret {
  from,
  to {
    border-color: transparent; /* 光标透明 */
  }
  50% {
    border-color: rgb(255, 255, 255); /* 光标显示 */
  }
}

登录后复制

代码解析：

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

• overflow: hidden;：隐藏超出元素宽度的内容。
• white-space: nowrap;：防止文本换行，确保所有文本都在一行。
• border-right: 0.15em solid orange;：作为打字机光标的视觉表现。
• margin: 0 auto;：使h5元素（块级元素）在父容器中水平居中。
• animation: typing ... forwards, blink-caret ... infinite;：同时应用两个动画。
  • typing动画通过从width: 0到width: 35%的过渡，配合steps(50, end)（步进动画），模拟文本逐字显示。forwards属性确保动画结束后元素保持其最终状态（width: 35%）。
  • blink-caret动画则通过改变border-color在透明和白色之间切换，创建闪烁效果。infinite属性表示该动画将无限循环。

核心问题：打字动画完成后如何停止闪烁光标

在上述代码中，typing动画会在3.5秒后完成并停止，但blink-caret动画由于设置了infinite，会无限期地闪烁下去。这通常不是我们希望的效果，我们期望在文本完全显示后，光标也能停止闪烁。

解决方案：调整光标动画的迭代次数与延迟

要解决这个问题，我们需要修改blink-caret动画的属性，使其在typing动画结束后停止。一种有效的方法是计算typing动画的持续时间，然后让blink-caret动画运行相应的迭代次数，并在其结束后保持最终状态。

1. 确定typing动画的持续时间： 原始代码中为3.5s。
2. 计算blink-caret动画所需的迭代次数： blink-caret的单次循环持续时间为0.75s。为了使其在typing动画持续期间（或稍长一点）运行，我们需要计算 3.5s / 0.75s ≈ 4.66。因此，将其迭代次数设置为5次是比较合适的，这样它会运行 5 * 0.75s = 3.75s，略微超出打字动画，给用户一个“完成”的感知后停止。
3. 添加forwards属性： 确保blink-caret动画在完成所有迭代后，保持其最终状态（即光标透明）。

修改后的animation属性如下：

标签： css javascript java html 响应式布局 响应式设计 区别 css动画 硬件加速 overflow