本教程深入探讨CSS打字机效果的实现与优化。我们将学习如何通过CSS动画精确控制文本的逐字显示，并重点解决在文本输入完成后，如何优雅地停止闪烁光标的问题。同时，文章还将介绍如何调整文本对齐方式，以实现更美观的视觉呈现，确保动画效果的完整性和专业性。
CSS打字机效果基础：原理与实现
CSS打字机效果通过模拟真实打字过程，逐字显示文本，并通常伴随一个闪烁的光标。其核心原理是利用CSS的overflow: hidden、white-space: nowrap以及width动画来控制文本的显示范围，结合border-right属性模拟光标。
让我们先看一个典型的打字机效果实现代码：
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%; /* 动画结束时的宽度，应覆盖所有文本 */ }}/* 光标闪烁动画：控制边框颜色实现闪烁 */@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属性如下：
.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代码：
CSS打字机效果教程 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); /* 光标显示 */ } }print("Hello, World!")
注意：
steps(50, end)中的数字50是原始示例中的值，通常应根据文本的实际字符数（或近似值）来设置，以确保每个字符的显示都对应一个步进。例如，”print(“Hello, World!”)”有22个字符，所以steps(22, end)会更精确。to { width: 35%; }这个值需要根据实际文本内容和字体大小进行调整，以确保35%的宽度恰好能容纳所有文本，不多不少。在实际开发中，更推荐使用max-content或通过JavaScript动态计算宽度。
注意事项与最佳实践
文本长度与动画时间匹配： steps()函数中的步数应与文本的字符数大致匹配，以获得流畅的打字效果。typing动画的duration（持续时间）也应与文本长度成正比。如果文本很长，width百分比可能不足以覆盖，或需要更大的百分比。响应式设计： 使用width的百分比单位有助于响应式布局，但仍需测试不同屏幕尺寸下的效果。在某些情况下，可能需要使用vw单位或媒体查询来调整width的终点值。可访问性： 对于依赖视觉动画的用户，应考虑提供替代方案，例如在动画完成后显示完整文本，或者允许用户暂停/禁用动画。为屏幕阅读器提供有意义的文本内容。JavaScript辅助： 对于更复杂的场景，例如动态加载的文本、用户交互控制动画、或者需要更精确地控制动画的开始/停止，JavaScript是更灵活和强大的选择。例如，可以通过JavaScript在typing动画结束后移除blink-caret类。性能考量： 尽管CSS动画通常性能良好，但过度复杂的动画或在大量元素上使用动画仍可能影响页面性能。合理优化动画属性和使用硬件加速（如transform属性）是最佳实践。
总结
本教程详细介绍了如何使用CSS实现打字机效果，并着重解决了两个关键优化点：一是通过精确控制blink-caret动画的迭代次数
以上就是CSS打字机效果：如何优雅地停止闪烁光标与居中文本的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1603703.html
微信扫一扫 
支付宝扫一扫 
