CSS打字光标闪烁效果实现方法
2026-05-31 21:31:02
0浏览
收藏
热门推荐
漫画APP
动画内容聚合，热门资源快捷查看
本文深入解析了如何用纯CSS稳健实现打字光标闪烁效果，摒弃易出错的caret-color、border-right或直接操作文本等方案，推荐以::after伪元素模拟竖线光标并配合opacity动画——轻量、兼容性强（支持IE11+）、可控性高；同时详述了关键细节：动画时长设为1秒更自然、必须继承font-family和line-height确保对齐、多行场景下需结合white-space与inline-block垂直对齐，以及避免will-change引发的卡顿陷阱，真正解决开发者在终端效果、代码演示等真实场景中“光标飘移、错位、失焦、不闪烁”的顽疾。
用 animation + ::after 模拟打字光标最稳
纯 CSS 实现打字光标闪烁，核心不是靠 JS 控制，而是用伪元素模拟光标，并用 animation 控制显隐。直接操作文本内容或依赖 contenteditable 的方案容易卡顿、失焦或兼容性差。
常见错误是给文字本身加 animation 透明度变化——这会让整个文本闪，不是“光标”在闪；还有人试图用 border-right 动画，但 border 不会随字体大小自动对齐，移动端一缩放就错位。
- 光标必须是独立的视觉元素，
::after是最轻量可控的选择 - 动画时长建议设为
1s，太快看不清，太慢像卡死（尤其 Safari 对steps(1)支持不稳定） - 必须加
font-family和line-height继承，否则光标高度/基线错乱 - 如果父容器用了
flex或grid，要确保position: relative在正确层级上，否则::after偏移
.typing-cursor::after {
content: "|";
margin-left: 2px;
animation: blink 1s infinite;
font-family: inherit;
line-height: inherit;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
为什么不用 caret-color？它根本不是“打字动画”
caret-color 只控制输入框里真实光标的颜色，不适用于静态文本，也不能触发“闪烁”行为——它只是个颜色开关，浏览器决定何时显示/隐藏，你没法干预节奏或样式（比如加粗、变宽、加背景）。
真实场景中，如果你在做“终端效果”“代码演示页”或“欢迎语逐字出现”，用户看到的是“文字+光标”整体动效，caret-color 完全不参与这个流程。
caret-color只对、