呼吸灯效果本质是opacity与box-shadow协同的非线性动画，通过多层阴影模拟光晕、cubic-bezier缓动曲线模拟呼吸节奏，并需兼顾兼容性与视觉适配。
呼吸灯效果的本质是 opacity + box-shadow 的循环变化
纯 CSS 实现“呼吸灯”边框发光，核心不是靠 border 本身动画（它不支持渐变色或模糊），而是用 box-shadow 模拟发光，并配合 opacity 或 transform: scale() 制造明暗/强弱节奏。关键在于让光效有「由弱到强再衰减」的非线性过渡，否则会像普通闪烁。
常见错误是只用 box-shadow 的大小或颜色做线性动画，结果看起来生硬、机械，不像呼吸——人眼对亮度变化敏感，需在中间段放慢变化速度（即用 cubic-bezier(.3,1.2,.7,1) 这类缓入缓出曲线）。
用 @keyframes 定义呼吸周期，重点控制 shadow 和 opacity
一个可用的呼吸节奏：0% → 光最弱（小阴影 + 低透明度），50% → 光最强（大模糊 + 高透明度 + 可选轻微放大），100% → 回到最弱。注意不要在 100% 突然归零，否则断层明显。
- 推荐用
opacity而非仅改box-shadow的rgba()透明度，因为后者在部分旧版 Safari 中动画卡顿 -
box-shadow至少写两层：内层聚焦（0 0 8px），外层弥散（0 0 24px），模拟真实光晕层次 - 避免在动画中改变
box-shadow的颜色色相（如 hsl 调 hue），会导致 Chrome 渲染闪烁；固定色相，只调alpha或lightness
```css
@keyframes breathe {
0%, 100% {
opacity: 0.6;
box-shadow: 0 0 8px rgba(100, 200, 255, 0.4),
0 0 24px rgba(100, 200, 255, 0.2);
}
50% {
opacity: 1;
box-shadow: 0 0 16px rgba(100, 200, 255, 0.8),
0 0 40px rgba(100, 200, 255, 0.5);
}
}
```应用动画时必须设置 animation-timing-function 和 iteration-count
默认 ease 不够柔和，呼吸感弱；无限循环若不用 infinite 就只闪一次；且别漏掉 animation-fill-mode: forwards，否则动画结束后元素会跳回初始态（比如突然变暗）。
立即学习“前端免费学习笔记（深入）”；
- timing function 推荐
cubic-bezier(0.25, 0.46, 0.45, 0.94)—— 比ease-in-out更贴合呼吸节奏 - duration 控制在 2.5s–4s 之间，太快像警报灯，太慢失去动态感
- 如果容器有
border-radius，确保box-shadow的模糊半径 ≤ 圆角值 × 1.5，否则发光溢出不自然
```css
.glow-border {
animation: breathe 3.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
animation-fill-mode: both;
}
```移动端和 Safari 下的兼容性陷阱
iOS Safari 对 box-shadow 动画的硬件加速支持不稳定，单纯加 transform: translateZ(0) 有时无效；更可靠的是强制开启合成层 + 避免同时动画多个属性。
- 务必加
will-change: opacity, box-shadow，但只在需要时启用（比如 hover 后才开始呼吸），避免长期占用 GPU 内存 - 旧版 Safari（≤15.4）不支持
box-shadow多层动画同步，建议降级为单层box-shadow+opacity组合 - 某些安卓 WebView 会把
rgba()中的 alpha 值当整数处理（如0.3变成0），测试时用hsla(200, 100%, 70%, 0.3)替代
复杂点在于：呼吸节奏要匹配人眼感知，而不是参数精确；最容易被忽略的是在深色背景上测试——浅色发光在黑底上会过曝，得压低 box-shadow 的 alpha 值并缩短 duration。
