CSS打字机效果：完成打字后停止光标闪烁的实现教程-html教程-PHP中文网

CSS打字机效果：完成打字后停止光标闪烁的实现教程

霞舞

发布： 2025-12-08 16:20:07

原创

1005人浏览过

CSS打字机效果：完成打字后停止光标闪烁的实现教程

本教程旨在解决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动画的关键。

以上就是CSS打字机效果：完成打字后停止光标闪烁的实现教程的详细内容，更多请关注php中文网其它相关文章！