最稳纯CSS实现是用多层box-shadow叠加动画模拟流动发光，通过颜色渐变与±2px偏移营造游动感，配合animation-play-state控制启停，并为老旧浏览器提供单层box-shadow降级方案。
用 box-shadow 模拟流动发光边框最稳
纯 CSS 实现“流动发光”不是真让光在跑，而是靠多层 box-shadow + animation 叠加出呼吸+偏移的视觉错觉。用 border 本身做动画会卡顿、不发光，且无法实现“流动”感——别碰 border-image 或渐变边框，兼容性和控制力都差。
实操建议：
- 只对
button或带display: inline-block/block的元素生效，inline元素要先改显示模式 - 发光范围靠
box-shadow的第 3 个参数（模糊半径）控制，建议设为12px～24px，太大易糊，太小没效果 - 动画用
keyframes改变box-shadow的颜色和偏移值，不要只变 opacity —— 那只是呼吸，不是流动
@keyframes 里必须同时动颜色和偏移
只变透明度或只变颜色，看起来是静态辉光；要“流动”，就得让光晕在 X/Y 方向轻微游走，配合色相微调，人眼才会感知为“游动”。下面这段可直接复制：
@keyframes glowFlow {
0% {
box-shadow: 0 0 16px #6366f1, 0 0 32px rgba(99, 102, 241, 0.5);
}
25% {
box-shadow: 2px -2px 16px #8b5cf6, 0 0 32px rgba(139, 92, 246, 0.6);
}
50% {
box-shadow: 0 0 16px #ec4899, 0 0 32px rgba(236, 72, 153, 0.5);
}
75% {
box-shadow: -2px 2px 16px #3b82f6, 0 0 32px rgba(59, 130, 246, 0.6);
}
100% {
box-shadow: 0 0 16px #6366f1, 0 0 32px rgba(99, 102, 241, 0.5);
}
}
注意点：
立即学习“前端免费学习笔记（深入）”；
- 每帧的
box-shadow至少保留两层：一层聚焦发光（小模糊），一层扩散晕染（大模糊+低透明度） - X/Y 偏移控制在 ±2px 内，超过就显得抖，不是流
- 色相变化选相邻色系（如 indigo → violet → pink → blue），跳色会像故障灯
悬停触发必须用 :hover + transition 补间
直接写 animation: glowFlow 3s infinite 在 :hover 里会导致鼠标一进一出就重播，断续卡顿。正确做法是用 transition 控制动画启停，并靠 animation-play-state 切换运行状态：
button {
position: relative;
padding: 0.5rem 1rem;
border: none;
background: #fff;
color: #374151;
}
button:hover {
animation: glowFlow 3s infinite ease-in-out;
animation-play-state: running;
}
button:not(:hover) {
animation-play-state: paused;
}
关键细节：
- 必须加
position: relative，否则部分浏览器下box-shadow动画可能错位 -
ease-in-out比linear更自然，避免匀速滑行感 - 如果按钮有圆角（
border-radius），发光会自动贴合，不用额外处理
移动端 Safari 和旧版 Edge 容易不发光
iOS Safari 15.4 之前、Edge 18 及更早版本对多层 box-shadow 动画支持弱，常表现为只闪一下或完全不动。绕过方案很实际：
- 加降级：在
@supports not (animation: glowFlow)里给:hover加单层box-shadow固定发光 - 避免用
hsl()或color-mix()等新函数配色，老浏览器解析失败就全黑 - 真要兼容 IE11？放弃流动，只做静态双层
box-shadow+transition淡入
流动发光本质是锦上添花，别让它拖慢首屏或卡住交互。光效越强，GPU 占用越高，低端安卓机连续悬停 10 秒以上可能掉帧——测一测你目标用户的真实设备。
