animation + HSL 实现呼吸灯效果的关键原理
呼吸灯效果本质是颜色明度（lightness）或饱和度（saturation）的平滑周期性变化，不是简单地在两个 rgb() 值间过渡——那样容易发灰、失真或跳变。HSL 模型里，hsl(h, s%, l%) 的 l% 控制明暗，s% 控制鲜艳程度，二者单独调节能更自然模拟“亮起→呼吸→回落”的视觉节奏。
- 用
l%变化（如 40% → 85% → 40%）比改rgb()更易控制亮度梯度，避免过曝或死黑 - 慎用
s%单独大幅变化：饱和度从 100% → 0% 会褪成灰白，失去“灯感”；建议保持s%≥ 70%，只微调 ±10% 辅助呼吸感 - 动画时长建议 2.5s–4s，
ease-in-out或cubic-bezier(0.34, 1.56, 0.64, 1)更接近真实灯体物理响应
写错 hsl() 动画值会导致颜色突变或不动
常见错误是把 HSL 当成 RGB 写成固定数值字符串，或者在 @keyframes 中漏写单位（如写 hsl(200, 100, 50) 缺少 %），浏览器直接忽略该帧，动画卡在起点。
- 必须写全单位：
hsl(200, 100%, 50%)，s和l后的%不可省略 - 色相
h是无单位数字（0–360），但别写成小数或负数，否则部分浏览器解析异常 - 不要在 keyframes 里混用
rgb()和hsl()：浏览器无法插值，会硬切，出现闪烁 - 示例正确写法：
@keyframes breathe {<br> 0% { background-color: hsl(210, 90%, 45%); }<br> 50% { background-color: hsl(210, 95%, 78%); }<br> 100% { background-color: hsl(210, 90%, 45%); }<br>}
IE 和旧版 Safari 对 hsl() 动画的支持陷阱
IE 完全不支持 hsl() 在 @keyframes 中的动画（仅静态可用），iOS Safari
- 若需兼容 IE，必须降级为
rgb()+ JS 控制，或放弃呼吸效果 - 对 iOS will-change: background-color 减少渲染撕裂，但不能根治
- 更稳妥的渐进方案：用
@supports (animation-timeline: none)（实际检测background-color: hsl()动画）做特性检测，fallback 到淡入淡出
用 animation-delay 错开多个元素呼吸节奏
单个灯呼吸容易单调，多个灯齐闪反而像故障。用 animation-delay 让每个元素起始相位偏移，能立刻获得层次感，且无需 JS。
立即学习“前端免费学习笔记（深入）”；
- 延迟值建议用总周期的 25%～40% 分段，例如周期
3s，则设animation-delay: -0.75s、-1.5s、-2.25s - 负延迟合法且实用：让动画从中间帧开始，比正延迟更自然
- 别用随机数生成 delay：CSS 里无法动态计算，得手写或由构建工具注入
- 示例：
.led:nth-child(1) { animation-delay: -0.5s; }<br>.led:nth-child(2) { animation-delay: -1.0s; }<br>.led:nth-child(3) { animation-delay: -1.5s; }
