本文介绍如何使用纯html与css实现文本逐字打字机效果，通过steps()时间函数控制动画帧数，无需javascript即可完成流畅的字符逐显效果。
本文介绍如何使用纯html与css实现文本逐字打字机效果，通过steps()时间函数控制动画帧数，无需javascript即可完成流畅的字符逐显效果。
在现代网页开发中，“打字机效果”（Typewriter Effect）常用于首页标题、引导文案或交互式介绍，以增强视觉吸引力与用户注意力。虽然常见方案依赖JavaScript（如setTimeout循环插入字符），但若追求轻量、无脚本、高可维护性，纯CSS方案同样可行——关键在于利用css动画的animation-timing-function: steps()特性。
steps(n, end)将动画均匀划分为n个离散阶跃，每步停留固定时长，恰好契合“逐字显现”的需求：每个字符“跳入”视图，而非平滑过渡。但该方法有前提：需预先知道总字符数，并为每个字符单独包裹元素（如），以便统一控制宽度与布局。
以下为完整实现代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>逐字显示动画</title> <style> p { --letters: 47; /* 总字符数（含空格与标点） */ --letter-width: 0.6em; /* 单字符占位宽度（建议等宽字体） */ --duration: 8s; /* 整体动画时长 */ font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; white-space: nowrap; width: 0; overflow: hidden; animation: tape var(--duration) steps(var(--letters)) both; display: inline-flex; margin: 0; font-size: 1.2rem; line-height: 1.5; } span { width: var(--letter-width); flex: none; /* 可选：添加轻微延迟营造自然感（非必需） */ /* animation-delay: calc(var(--index) * 0.1s); —— 需js动态注入，此处不采用 */ } @keyframes tape { to { width: calc(var(--letters) * var(--letter-width)); } } </style> </head> <body> <p> <span>H</span><span>e</span><span>l</span><span>l</span><span>o</span><span> </span> <span>t</span><span>h</span><span>e</span><span>r</span><span>e</span><span>.</span><span> </span> <span>M</span><span>y</span><span> </span><span>n</span><span>a</span><span>m</span><span>e</span><span> </span> <span>i</span><span>s</span><span> </span><span>X</span><span>Y</span><span>Z</span><span>.</span><span> </span> <span>I</span><span> </span><span>a</span><span>m</span><span> </span><span>d</span><span>o</span><span>i</span><span>n</span><span>g</span><span> </span> <span>t</span><span>h</span><span>i</span><span>s</span><span>.</span><span>.</span><span>.</span> </p> </body> </html>✅ 关键要点说明：
立即学习“前端免费学习笔记（深入）”；
- –letters 必须精确等于标签总数（本例为47），否则动画会提前结束或溢出；
- 推荐使用等宽字体（如monospace），确保每个视觉宽度一致，避免跳动；
- width: 0 → width: calc(…) 的动画配合 overflow: hidden 实现“从左向右展开”效果；
- display: inline-flex 防止空格塌陷，保证字符间距可控；
- 若文本含换行或复杂格式，此方案不适用——此时应切换至JavaScript方案（如requestAnimationFrame逐字符插入）。
⚠️ 注意事项：
- 此方法不可响应式自动适配动态文本：内容变更需同步更新–letters值与HTML结构；
- 对seo与可访问性（a11y）友好——所有文本均存在于dom中，屏幕阅读器可正常朗读；
- 动画性能优秀（仅触发合成属性width），兼容chrome 43+、firefox 49+、safari 10+及edge 16+。
总结而言，该CSS方案是静态文案场景下的优雅解法：零JS依赖、高渲染效率、语义清晰。若项目需支持多语言、用户输入或实时更新文本，则建议结合JavaScript封装为可复用组件，以兼顾灵活性与体验一致性。