纯CSS打字机效果需用ch单位+steps()实现逐字截取与光标独立闪烁，依赖data-text属性、overflow:hidden遮罩及等宽字体，避免JS插入以保障SEO和可访问性。
用 @keyframes 模拟打字机光标闪烁和逐字显示
核心是控制 content 的截取长度 + 光标（::after）的显隐。不能靠 JS 插入字符，否则 SEO 不友好、无法选中、也不利于屏幕阅读器。纯 CSS 方案必须依赖 ch 单位和 steps() 时间函数。
常见错误是直接对 width 或 opacity 做线性动画，结果字符“滑入”或“淡入”，完全不像打字效果。真正的打字是离散的、逐字的、带停顿的。
- 用
white-space: nowrap防止换行打断节奏 - 动画时长要匹配字符数：比如 20 字符，总时长设为
2s，则单字耗时100ms，再加光标闪烁周期（通常500ms亮 /500ms灭） - 必须用
animation-timing-function: steps(20, end)（20 是字符数），否则会插值过渡，字就“糊”了
content 动态截取只能靠伪元素 + attr(data-text) 配合
CSS 本身不能计算字符串长度或截取子串，所以得把文本塞进 HTML 的 data-text 属性里，再用 content: attr(data-text) 读出来。但这样还是整段显示——关键在「遮罩」：用父容器 overflow: hidden，再让伪元素宽度从 0ch 动画到 20ch（假设最多 20 字），配合 steps() 实现逐字展开。
容易踩的坑是用了 em 或 px 作单位：等宽字体下 1ch == 1 字符宽度，非等宽字体（如 system-ui）会导致错位或跳动。务必确认字体是等宽的，或改用 monospace 回退。
- HTML 写法：
- CSS 中伪元素
::after的content必须设为attr(data-text)，不能写死 - 动画的
to关键帧里width值必须严格等于最大字符数 ×1ch，多 0.1ch 都可能多闪一次光标
光标动画和文本动画必须解耦，否则节奏错乱
很多人把光标（竖线）和文字显示绑在同一个 @keyframes 里，结果光标随文字一起“抖”或者卡在中间不闪。正确做法是：文本动画用 steps() 控制宽度；光标单独用另一个 @keyframes，用 opacity 在 0 和 1 之间切换，时间函数用 step-start 或 ease-in-out 都可以，但周期要独立设置（比如 1s 一圈）。
兼容性注意点：ch 单位在 Safari 15.4 以下对某些字体支持不稳定；steps(N, end) 的 end 参数在旧版 Edge 会失效，建议补一个 steps(N) 回退。
- 光标伪元素推荐用
border-left而非background，更轻量且抗锯齿好 - 若需“打完暂停再消失”，可在文本动画结束后加一个
animation-delay控制光标延迟隐藏 - 移动端要注意
font-size缩放后ch值不变，但视觉宽度变，必要时用vw微调光标高度
响应式场景下字符数不确定？用 JS 补充 CSS 变量更可靠
当文本来自 CMS 或用户输入，长度不可预知时，硬编码 steps(32) 和 width: 32ch 就会出问题。此时最稳的方式是：JS 读取文本长度，写入 CSS 自定义属性，CSS 动画再引用该变量。
别用 style.width 直接设内联样式——会覆盖动画；要用 element.style.setProperty('--char-count', len)，然后在 CSS 里写 width: calc(var(--char-count) * 1ch) 和 animation-timing-function: steps(var(--char-count), end)。
- CSS 变量不支持直接用于
steps()参数（部分浏览器报错），稳妥写法是 JS 同时注入两个变量：--char-count和--steps-fn，后者拼成字符串"steps(24, end)"再用animation-timing-function: var(--steps-fn) - 服务端渲染页面首次加载时，JS 可能滞后，建议加
transition: opacity .1s防止闪白 - 如果文本含空格或 emoji，注意 emoji 通常占 2ch，
.length会误判，需用Array.from(text).length计算真实可视字符数
实际做下来，最难的不是写动画，而是让光标在最后一字停驻时保持自然节奏，又不破坏可访问性。很多方案为了效果砍掉了 user-select: text，结果用户根本没法复制那行酷炫文字——这点很容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
