CSS焦点闪烁效果实现教程

span:focus {
  animation: focus-blink 1.2s ease-in-out 3;
  animation-fill-mode: forwards;
}

关键点：

• 3 表示只闪 3 次，不是无限循环，避免干扰后续操作
• ease-in-out 让闪烁更自然，硬切（linear）容易显得机械
• 必须加 animation-fill-mode: forwards，否则最后一次动画结束后会跳回初始样式

替代方案：用 outline 或 box-shadow 更安全

如果目标只是“强调焦点”，而非严格意义上的“文字闪烁”，更推荐用 outline 或 box-shadow 动画。它们不影响文字渲染，兼容性更好，且不会降低可读性：

input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25),
              0 0 0 4px rgba(0, 123, 255, 0.1);
  animation: pulse-outline 1.5s infinite;
}

@keyframes pulse-outline {
  0%, 100% { box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25), 0 0 0 4px rgba(0, 123, 255, 0.1); }
  50% { box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5), 0 0 0 6px rgba(0, 123, 255, 0.2); }
}

这个方案绕开了文字自身渲染层的抖动，也规避了屏幕阅读器对频繁 opacity 变化的误读风险。

真正要注意的是：闪烁动画本身有 WCAG 2.1 闪烁阈值限制（每秒不超过 3 次），连续闪烁超过 3 秒可能触发光敏性癫痫风险。所以哪怕只是“闪 3 次”，也要确认是否真有必要——很多时候，一个稳态高亮比短暂闪烁更可靠。

终于介绍完啦！小伙伴们，这篇关于《CSS焦点闪烁效果实现教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！