CSS打字机效果：如何优雅地停止闪烁光标与居中文本-html教程-PHP中文网

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

心靈之曲

发布： 2025-12-09 14:55:52

原创

114人浏览过

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

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

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

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

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

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

登录后复制

.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动画运行相应的迭代次数，并在其结束后保持最终状态。

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

修改后的animation属性如下：

智写助手

智写助手写得更快，更聪明

查看详情

.col-twelve h5 {
  /* ...其他属性不变... */
  animation: typing 3.5s steps(50, end) forwards,
    blink-caret 0.75s step-end 5 forwards; /* 修改光标动画属性 */
}

登录后复制

现在，blink-caret动画将运行5次，总计3.75秒，随后停止并隐藏光标，从而实现打字效果完成后光标自动消失的预期行为。

优化视觉呈现：文本居中对齐

在打字机效果中，除了动画的停止，文本的对齐方式也对整体视觉效果至关重要。原始代码中使用了margin: 0 auto;来使h5元素（一个块级元素）在父容器中水平居中。然而，这只居中了h5元素本身，而不是h5内部的文本内容。当h5的width在动画过程中从0增长到35%时，文本默认是左对齐的。

为了让文本在h5元素内部也保持居中对齐，我们可以添加text-align: center;属性。

.col-twelve h5 {
  overflow: hidden;
  border-right: 0.15em solid orange;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: 0.15em;
  text-align: center; /* 添加文本居中对齐 */
  animation: typing 3.5s steps(50, end) forwards,
    blink-caret 0.75s step-end 5 forwards;
}
/* ... @keyframes 保持不变 ... */

登录后复制

margin: 0 auto;与text-align: center;的区别：

margin: 0 auto;：应用于块级元素，使其在父容器中水平居中。它改变的是元素自身的位置。
text-align: center;：应用于块级元素，使其内部的行内内容（如文本、图片、等）水平居中。它改变的是元素内容的对齐方式。

在打字机效果中，同时使用这两个属性可以确保h5容器本身居中，并且容器内的文本在打字过程中也保持居中显示，提供更平衡和美观的视觉体验。

完整示例与综合应用

下面是结合了停止闪烁光标和文本居中对齐的完整HTML和CSS代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS打字机效果教程</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #282c34;
            margin: 0;
            font-family: 'Courier New', Courier, monospace;
        }

        .col-twelve {
            width: 100%; /* 确保父容器有足够宽度 */
            text-align: center; /* 确保父容器内的h5能居中 */
        }

        .col-twelve h5 {
            overflow: hidden; /* 确保内容在动画完成前不显示 */
            border-right: 0.15em solid orange; /* 模拟打字机光标 */
            white-space: nowrap; /* 保持内容在单行 */
            margin: 0 auto; /* 使h5元素在父容器中水平居中 */
            letter-spacing: 0.15em; /* 调整字间距 */
            font-size: 2em; /* 调整字体大小 */
            color: #ffffff; /* 文本颜色 */
            max-width: 35%; /* 确保宽度不会超过此值，与动画to:width保持一致 */
            text-align: center; /* 确保文本在h5内部居中 */

            /* 关键动画属性 */
            animation: typing 3.5s steps(22, end) forwards, /* 22是"print("Hello, World!")"的字符数 */
                       blink-caret 0.75s step-end 5 forwards; /* 光标闪烁5次后停止 */
        }

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

        /* 光标闪烁动画：控制边框颜色实现闪烁 */
        @keyframes blink-caret {
            from,
            to {
                border-color: transparent; /* 光标透明 */
            }
            50% {
                border-color: rgb(255, 255, 255); /* 光标显示 */
            }
        }
    </style>
</head>
<body>
    <div class="col-twelve">
       <h5>print("Hello, World!")</h5>
    </div>
</body>
</html>

登录后复制

注意：

steps(50, end)中的数字50是原始示例中的值，通常应根据文本的实际字符数（或近似值）来设置，以确保每个字符的显示都对应一个步进。例如，"print(\"Hello, World!\")"有22个字符，所以steps(22, end)会更精确。
to { width: 35%; }这个值需要根据实际文本内容和字体大小进行调整，以确保35%的宽度恰好能容纳所有文本，不多不少。在实际开发中，更推荐使用max-content或通过JavaScript动态计算宽度。

注意事项与最佳实践

文本长度与动画时间匹配： steps()函数中的步数应与文本的字符数大致匹配，以获得流畅的打字效果。typing动画的duration（持续时间）也应与文本长度成正比。如果文本很长，width百分比可能不足以覆盖，或需要更大的百分比。
响应式设计： 使用width的百分比单位有助于响应式布局，但仍需测试不同屏幕尺寸下的效果。在某些情况下，可能需要使用vw单位或媒体查询来调整width的终点值。
可访问性： 对于依赖视觉动画的用户，应考虑提供替代方案，例如在动画完成后显示完整文本，或者允许用户暂停/禁用动画。为屏幕阅读器提供有意义的文本内容。
JavaScript辅助： 对于更复杂的场景，例如动态加载的文本、用户交互控制动画、或者需要更精确地控制动画的开始/停止，JavaScript是更灵活和强大的选择。例如，可以通过JavaScript在typing动画结束后移除blink-caret类。
性能考量： 尽管CSS动画通常性能良好，但过度复杂的动画或在大量元素上使用动画仍可能影响页面性能。合理优化动画属性和使用硬件加速（如transform属性）是最佳实践。