怎样制作css打字效果的闪烁光标动画_通过border-right-color的steps动画-css教程-PHP中文网

用 border-right-color 做光标会失效，因 css 动画不支持颜色属性的离散插值；应改用 border-right-width 或 opacity 配合 steps(1, start) 实现硬切闪烁。

怎样制作css打字效果的闪烁光标动画_通过border-right-color的steps动画

为什么用 `border-right-color` 做光标会失效

直接对 border-right-color 应用 steps() 动画是无效的——CSS 动画不支持颜色属性的离散插值，steps(1, start) 在颜色变化上会被浏览器忽略，最终退化为平滑过渡或干脆不动。你看到光标没闪烁、一直常亮或完全没反应，大概率卡在这一步。

border-right-color 不在 CSS 动画可逐帧控制的属性列表中（属于“非可动画颜色属性”）
真正能被 steps() 精确控制的，是 border-right-width 或 opacity
想保留“光标”视觉，得换思路：用宽度开关模拟显隐，而非靠颜色切换

用 `border-right-width` + `steps(1, start)` 实现硬切光标

核心是让光标在「显示（2px 实线）」和「隐藏（0px 无边框）」之间强制跳变，steps(1, start) 确保中间不补间、不模糊。动画周期必须严格匹配闪烁节奏（通常 1s 内完成一次显/隐循环）。

span.cursor {
  border-right: 2px solid #000;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% { border-right-width: 2px; }
  50% { border-right-width: 0; }
}

关键点：动画里只改 border-right-width，不要碰 color 或 style
steps(1, start) 要写在 animation 简写里，例如：animation: blink 1s steps(1, start) infinite
如果光标位置偏移，检查是否父容器用了 line-height 或 vertical-align 干扰了基线对齐

兼容性与真实打字场景的细节补丁

纯 border-right 光标在行末换行、内联元素断行时容易错位；真正在做打字效果时，得配合 contenteditable 或 JS 字符逐帧注入，否则动画只是“假光标”。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

避免用 display: inline-block 包裹光标元素，它会破坏文本流，导致光标悬空
移动端 Safari 对 border-right 动画有渲染延迟，建议加 transform: translateZ(0) 强制 GPU 加速
若文字本身有 letter-spacing，光标宽度需同步调整，否则视觉节奏脱节
要支持深色模式，别写死 border-right-color: #000，改用 CSS 变量 如 var(--cursor-color)

比 `border-right` 更稳的替代方案

当项目需要高一致性或支持复杂排版（比如光标要随字体大小缩放、要适配 variable font 的 weight 变化），硬控 border-right-width 就开始吃力。此时该换用 background 模拟光标：

span.cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background-color: currentColor;
  animation: blink 1s steps(1, start) infinite;
}