本教程旨在解决css打字机效果中光标持续闪烁的问题。通过调整css动画的animation-delay和animation-iteration-count属性，可以实现在文本内容完全显示后，让打字光标停止闪烁并最终消失，从而提供一个更自然、完整的动画体验。
在网页开发中，CSS打字机效果是一种常见的文本动画，它能模拟文字逐个字符出现的动态过程，并通常伴随一个闪烁的光标。然而，一个常见的需求是，在文本内容完全显示后，希望这个光标能够停止闪烁，甚至消失，以表示打字过程的结束。如果处理不当，光标可能会无限期地闪烁下去，影响用户体验。
问题分析：无限闪烁的光标
我们来看一个典型的CSS打字机效果代码片段：
print("Hello, World!")
.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，因此光标最终会变为透明并消失。
示例代码
将上述修改整合到完整代码中：
CSS打字机效果演示 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; /* 光标显示为橙色 */ }}print("Hello, World!")
注意事项：
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动画的关键。
以上就是CSS打字机效果：完成打字后停止光标闪烁的实现教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1603452.html
微信扫一扫 
支付宝扫一扫 
