:focus配合@keyframes可实现文字闪烁，但需避免opacity=0和color对比不足；推荐3次轻微透明度浮动+色相偏移动画，或改用box-shadow脉冲更安全合规。
:focus-within 或 :focus 配合 @keyframes 实现文字闪烁
纯 CSS 实现焦点闪烁，核心是用 :focus 触发动画，再用 @keyframes 控制 color 和 opacity 的周期性变化。注意：不能直接在 :focus 里写动画属性（如 animation: blink 1s infinite），必须先定义 @keyframes，再通过选择器引用。
为什么 color + opacity 同时动画容易出问题
两者叠加会放大视觉干扰，尤其在深色背景上，opacity: 0 会让文字完全消失，失去可读性；而 color 变化若对比度不足（比如从 #333 到 #666），人眼几乎看不出闪烁。实际效果差的常见原因：
-
opacity值设为0或过低 → 文字阶段性不可见，违反可访问性 -
color变化范围太小 → 动画存在但“看不见” - 未限制动画持续时间或次数 → 持续闪烁干扰用户操作
- 未设置
animation-fill-mode: forwards→ 失焦后可能残留末帧状态
推荐的 keyframes 写法（兼顾可用性与提示性）
用轻微透明度浮动 + 明显色相偏移，避免完全消失，同时保证焦点状态清晰可辨。例如：
@keyframes focus-blink {
0%, 100% {
color: #007bff;
opacity: 1;
}
50% {
color: #0056b3;
opacity: 0.85;
}
}
立即学习“前端免费学习笔记（深入）”；
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 次”，也要确认是否真有必要——很多时候，一个稳态高亮比短暂闪烁更可靠。
