CSS打字机效果：如何优雅地停止闪烁光标与居中文本

css打字机效果：如何优雅地停止闪烁光标与居中文本

本教程深入探讨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属性如下：

Dream Machine

Dream Machine 是由 Luma AI 开发的一款 AI 视频生成工具，可以快速将文本和图像转换为高质量的视频内容。

157 查看详情 Dream Machine

.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;：应用于块级元素，使其内部的行内内容（如文本、图片、等）水平居中。它改变的是元素内容的对齐方式。

在打字机效果中，同时使用这两个属性可以确保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或通过J*aScript动态计算宽度。

注意事项与最佳实践

文本长度与动画时间匹配： steps()函数中的步数应与文本的字符数大致匹配，以获得流畅的打字效果。typing动画的duration（持续时间）也应与文本长度成正比。如果文本很长，width百分比可能不足以覆盖，或需要更大的百分比。
响应式设计： 使用width的百分比单位有助于响应式布局，但仍需测试不同屏幕尺寸下的效果。在某些情况下，可能需要使用vw单位或媒体查询来调整width的终点值。
可访问性： 对于依赖视觉动画的用户，应考虑提供替代方案，例如在动画完成后显示完整文本，或者允许用户暂停/禁用动画。为屏幕阅读器提供有意义的文本内容。
J*aScript辅助： 对于更复杂的场景，例如动态加载的文本、用户交互控制动画、或者需要更精确地控制动画的开始/停止，J*aScript是更灵活和强大的选择。例如，可以通过J*aScript在typing动画结束后移除blink-caret类。
性能考量： 尽管CSS动画通常性能良好，但过度复杂的动画或在大量元素上使用动画仍可能影响页面性能。合理优化动画属性和使用硬件加速（如transform属性）是最佳实践。

总结

本教程详细介绍了如何使用CSS实现打字机效果，并着重解决了两个关键优化点：一是通过精确控制blink-caret动画的迭代次数

以上就是CSS打字机效果：如何优雅地停止闪烁光标与居中文本的详细内容，更多请关注其它相关文章！

# 结束后 # 宝坻区营销网络推广中心 # 全网营销推广途径 # 济南推广网络营销招聘网 # seo云套餐 # seo内容页设置 # 站外seo查询 # 网站建设筹划方案模板 # 闵行网站优化报价 # 黑龙江营销推广网站建设 # 济南营销推广设计招聘 # 结束时 # 应用于 # 持续时间 # 完成后 # css # 的是 # 步进 # 迭代 # 使其 # overflow # 硬件加速 # css动画 # 区别 # 响应式设计 # 响应式布局 # html # java # javascript

相关栏目：【 Google疑问12 】【 Facebook疑问10 】【优化推广96088 】【技术知识133117 】【 IDC资讯59369 】【网络运营7196 】【 IT资讯61894 】

2025-12-09

SQL多表关联如何理解_核心原理解析助你掌握关键方法【教程】 SQL多表连接如何理解_JOIN关联关系详细步骤解析【指导】 SQL多表连接结果异常怎么办_JOIN条件排查方法解析【指导】 SQL索引下推是什么_ICP机制性能提升原理【教程】 SQL跨表统计怎么写_重要技巧总结提升查询效率【技巧】 SQL注入如何防护_完整逻辑拆解助力系统化掌握【技巧】 SQL上传文件信息建模方法_SQL存储文件元数据方案 SQL多语种存储方案设计_SQL字符集选择策略 SQL字符串处理如何编写_重要技巧总结提升查询效率【教学】 SQL去重查询怎么实现_优化思路讲解帮助高效处理数据【技巧】 SQL统计复购用户怎么做_多次行为分析SQL思路【教程】 SQL字符串处理如何编写_优化思路讲解帮助高效处理数据【教程】 SQL动态字段解析技巧_SQL解析JSON多层字段 SQL线上慢SQL如何治理_规范与工具实践总结【技巧】 SQL表结构如何演进_兼容老数据设计思路【教程】 SQL排序规则如何设置_ORDERBY排序原理与性能说明【指导】 SQL去重查询怎么实现_真实案例解析强化复杂查询思维【教学】 SQL按字段范围分批处理_SQL避免长时间锁表 SQL统计不同字段组合数量_多列聚合查询技巧【技巧】 SQL多字段去重怎么处理_GROUPBY去重思路说明【教学】

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

点击免费数据支持

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司是一家深耕海外推广领域十年的专业服务商，作为谷歌推广与Facebook广告全球合作伙伴，聚焦外贸企业出海痛点，以数字化营销为核心，提供一站式海外营销解决方案。公司凭借十年行业沉淀与平台官方资源加持，打破传统外贸获客壁垒，助力企业高效开拓全球市场，成为中小企业出海的可靠合作伙伴。