当前位置：首页 > 文章列表 > 文章 > 前端 > CSS打字机效果：停闪光标实现方法

CSS打字机效果：停闪光标实现方法

2025-12-25 18:36:42 0浏览收藏

问题分析：无限闪烁的光标

我们来看一个典型的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打字机效果演示



  
     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打字机效果：停闪光标实现方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！