本教程深入探讨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;：应用于块级元素，使其内部的行内内容（如文本、图片、<span>等）水平居中。它改变的是元素内容的对齐方式。
在打字机效果中，同时使用这两个属性可以确保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属性）是最佳实践。
总结
本教程详细介绍了如何使用CSS实现打字机效果，并着重解决了两个关键优化点：一是通过精确控制blink-caret动画的迭代次数
