--cursor变量必须配合@keyframes动画使用，因其本身不触发重绘；真正驱动光标闪烁的是动画中对border-right颜色或透明度的切换，变量仅用于统一控制颜色、宽度和周期。
为什么 --cursor 变量必须配合 @keyframes 动画使用
纯 CSS 变量本身不触发重绘，--cursor 单独定义不会让光标“动起来”。它只是个静态值容器，真正驱动闪烁的是 @keyframes 中对 border-right（或 box-shadow）的透明度/宽度切换。变量在这里的作用是统一控制光标颜色、宽度、闪烁周期，方便后续调整。
常见错误是只写 :root { --cursor: #007bff; } 就以为光标会动——不会。你必须在动画关键帧里读取它：
@keyframes blink {
0%, 100% { border-right-color: var(--cursor); }
50% { border-right-color: transparent; }
}
- 动画名必须和
animation属性中引用的一致（如animation: blink 1s infinite;） - 不能用
opacity控制光标显隐——它会让整个文字变透明，而光标应仅“消失”，文字保持可见 - 推荐用
border-right而非outline或text-decoration，因后者难以精确定位到末尾
如何让光标只出现在文本末尾且不干扰排版
打字机效果的本质是逐字显示 + 光标定位。光标必须“附着”在当前最后一个字符右侧，且不撑开行高或触发换行。靠 border-right 实现最稳妥，但需注意几个关键点：
- 元素必须设为
display: inline-block或inline，否则border-right会占满整行宽度 - 给光标加
vertical-align: baseline，避免和文字基线错位 - 设置
border-right-width: 2px并用var(--cursor-width, 2px)替代硬编码，便于响应式调整 - 如果文本含换行或空格，需用
white-space: nowrap配合overflow: hidden防止光标跑偏
为什么 animation-delay 要和打字速度严格同步
光标闪烁节奏必须匹配字符逐个出现的时间间隔，否则会出现“光标提前闪”或“卡顿一帧”的割裂感。假设你用 JavaScript 每 150ms 插入一个字符，那么光标动画的周期也应设为 150ms × 2 = 300ms（亮 150ms + 灭 150ms）。
直接写 animation: blink 300ms infinite 不够可靠，因为浏览器渲染帧率可能波动。更稳的做法是：用 CSS 变量统一控制节奏：
:root {
--type-speed: 150ms;
}
.typing::after {
animation: blink calc(var(--type-speed) * 2) infinite;
}
- 不要把光标动画时长设成字符延迟的 1 倍（如 150ms）——那样会导致光标在字符刚出现时就立刻消失，视觉上像“没亮过”
- 若用
steps()实现打字动画，光标动画必须独立于steps()的帧数逻辑，否则会被截断 - 移动端要注意
animation-timing-function: steps(1, end)可能导致光标跳变，建议始终用linear或ease-in-out
兼容性陷阱：Safari 对 var() 在 @keyframes 中的支持很晚
Safari 直到 15.4 才支持在 @keyframes 内使用 var()。如果你需要支持旧版 Safari（比如 iOS 15.0–15.3），必须降级处理：
- 方案一：放弃变量，直接在
@keyframes里写死颜色和宽度（border-right: 2px solid #007bff;） - 方案二：用 JS 注入带内联样式的
<style></style>标签，动态生成 keyframes 规则 - 方案三：改用
box-shadow模拟光标（box-shadow: 2px 0 0 0 var(--cursor);），它在旧 Safari 中对var()支持更好
检查方式很简单：打开 Safari 开发者工具 → Elements → 查看 @keyframes 规则里是否解析出了变量值。没解析出来，就是兼容性问题。
最常被忽略的是光标高度——它必须和字体 line-height 和 font-size 严格对齐，否则在 Firefox 和 Safari 中容易上下浮动几像素。动手前先用 outline: 1px solid red 套住文字容器，确认光标始终钉在基线上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
