本教程旨在解决css打字机效果中光标持续闪烁的问题。通过调整css动画的animation-delay和animation-iteration-count属性，可以实现在文本内容完全显示后，让打字光标停止闪烁并最终消失，从而提供一个更自然、完整的动画体验。
在网页开发中，CSS打字机效果是一种常见的文本动画，它能模拟文字逐个字符出现的动态过程，并通常伴随一个闪烁的光标。然而，一个常见的需求是，在文本内容完全显示后，希望这个光标能够停止闪烁，甚至消失，以表示打字过程的结束。如果处理不当，光标可能会无限期地闪烁下去，影响用户体验。
问题分析：无限闪烁的光标
我们来看一个典型的CSS打字机效果代码片段：
<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%; /* 假设文本宽度为35% */
}
}
@keyframes blink-caret {
from,
to {
border-color: transparent; /* 光标透明 */
}
50% {
border-color: rgb(255, 255, 255); /* 光标显示 */
}
}在这段代码中，typing动画负责文本的逐字显示，而blink-caret动画则控制光标的闪烁。问题的核心在于blink-caret动画的animation属性中使用了infinite关键字：
animation: blink-caret 0.75s step-end infinite;
立即学习“前端免费学习笔记（深入）”；
infinite意味着blink-caret动画将无限次重复，导致光标永不停止闪烁。为了在打字结束后停止光标闪烁，我们需要修改blink-caret动画的迭代次数和开始时间。
解决方案：精确控制光标动画
要解决光标无限闪烁的问题，我们需要对blink-caret动画的animation属性进行以下调整：
- 设置动画延迟（animation-delay）：让blink-caret动画在typing动画完成后才开始。
- 设置迭代次数（animation-iteration-count）：将infinite替换为一个有限的数字，例如1或3，以控制光标闪烁的次数。
- 设置动画填充模式（animation-fill-mode）：使用forwards确保动画在结束后保持其最终状态。
假设typing动画的持续时间是3.5s。如果我们希望光标在文本打完后，再闪烁一次然后消失，可以这样修改：
.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 1 3.5s forwards; /* 关键修改 */
}代码解析：
- typing 3.5s steps(50, end) forwards：typing动画持续3.5秒，steps(50, end)使其像打字一样逐字出现，forwards确保动画结束后元素保持最终状态（即width: 35%）。
- blink-caret 0.75s step-end 1 3.5s forwards：
- blink-caret：动画名称。
- 0.75s：每次闪烁的持续时间。
- step-end：时间函数，确保在动画周期结束时切换状态，模拟即时开关。
- 1：迭代次数。这里设置为1，表示光标在typing动画结束后，只会闪烁一个周期。
- 3.5s：动画延迟。这使得blink-caret动画在typing动画完成（3.5秒后）才开始执行。
- forwards：动画结束后，元素将保持blink-caret动画的最终状态。根据@keyframes blink-caret的定义，to状态是border-color: transparent，因此光标最终会变为透明并消失。
示例代码
将上述修改整合到完整代码中：
<!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;
font-family: 'Courier New', Courier, monospace;
color: #fff;
margin: 0;
}
.col-twelve {
background-color: #333;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.col-twelve h5 {
font-size: 2em;
font-weight: normal;
display: inline-block; /* 确保width属性生效 */
overflow: hidden; /* 确保内容在动画完成前不显示 */
border-right: 0.15em solid orange; /* 打字机光标 */
white-space: nowrap; /* 保持内容在单行 */
margin: 0; /* 移除默认外边距 */
letter-spacing: 0.15em; /* 调整字间距 */
/* 组合动画：打字动画和光标闪烁动画 */
animation: typing 3.5s steps(22, end) forwards, /* 22是"print("Hello, World!")"的字符数 */
blink-caret 0.75s step-end 1 3.5s forwards;
}
/* 关键帧动画定义 */
@keyframes typing {
from {
width: 0;
}
to {
/* 这里的width值需要根据实际文本长度和letter-spacing调整 */
/* 假设每个字符宽度固定，可以设置为百分比或em单位 */
/* 对于"print("Hello, World!")"，大约22个字符，可以根据实际渲染调整 */
width: 15.5em; /* 根据实际文本内容和letter-spacing调整 */
}
}
@keyframes blink-caret {
from,
to {
border-color: transparent; /* 光标透明 */
}
50% {
border-color: orange; /* 光标显示为橙色 */
}
}
</style>
</head>
<body>
<div class="col-twelve">
<h5>print("Hello, World!")</h5>
</div>
</body>
</html>注意事项：
- width属性的计算：@keyframes typing中的to { width: ...; }需要精确匹配文本内容的实际渲染宽度。如果设置过小，文本可能无法完全显示；如果设置过大，可能会出现额外的空白。一个更精确的方法是使用JavaScript动态计算文本宽度，或者通过反复调试CSS的em或ch单位来估算。在示例中，我将steps值从50调整为22（字符串字符数），并将to的width设置为15.5em，这是一个经验值，可能需要根据字体大小和letter-spacing进行微调。
- animation-fill-mode: forwards：这个属性非常重要，它确保动画在结束后保持其最终状态。对于typing动画，这意味着文本会保持完全显示；对于blink-caret动画，这意味着光标会保持透明状态（即消失）。
-
光标停留或消失：
- 如果希望光标在打字结束后消失，如本教程所示，blink-caret的forwards会使其停留在border-color: transparent状态。
- 如果希望光标在打字结束后保持可见但不闪烁，则需要更复杂的处理。一种方法是让blink-caret在最后一次闪烁后，将其border-color设置为非透明，或者在动画结束后通过额外的CSS规则或JavaScript来覆盖border-right的颜色。但最直接的纯CSS方法是让它消失。
- steps()函数的第一个参数：steps(N, end)中的N通常应设置为文本的字符数，或者略大于字符数以确保平滑过渡。这与typing动画的width属性紧密相关。
总结
通过对CSS动画属性animation-delay、animation-iteration-count和animation-fill-mode的精确控制，我们可以优雅地解决CSS打字机效果中光标无限闪烁的问题。这种方法不仅保持了纯CSS的实现方式，还提供了灵活的定制选项，可以根据具体需求调整光标的闪烁次数和最终状态。理解这些动画属性的工作原理是创建复杂而流畅的CSS动画的关键。
