呼吸灯效果需用@keyframes定义opacity从0.2到0.9再回0.2的周期性变化，时长3.5s、缓动ease-in-out，配合border-radius、class状态控制及JS精准启停，避免视觉断连与卡顿。
用 @keyframes 定义呼吸式透明度变化
呼吸灯效果本质是颜色亮度或透明度的平滑周期性变化，不能靠 opacity: 0 ↔ 1 硬切，否则会像开关灯。必须用缓动（ease-in-out）模拟“吸气—停顿—呼气”的节奏。
关键点：起始和结束 opacity 设为 0.2 而非 0，避免完全消失导致视觉断连；中间峰值设为 1 或 0.9（保留一点环境光感）。
@keyframes breathe {
0%, 100% { opacity: 0.2; }
50% { opacity: 0.9; }
}- 动画时长建议
3s～4s：短于2s显急促，长于5s易被忽略 - 不要用
animation-timing-function: linear，它会让呼吸失去“肺部张缩”感 - 避免在
0%和100%设不同值（如0%是0.2、100%是0.3），会导致循环跳变
给指示灯元素绑定动画并控制行为
状态指示灯通常是 <div class="led"> 这类轻量容器，需确保它有明确宽高和背景色，且不被父容器裁剪（overflow: visible）。
绑定动画时，animation-iteration-count: infinite 是必须的，但要注意：如果该灯需要支持“熄灭”状态（比如故障时停闪），就不能只靠 CSS 动画常驻，得配合 class 切换。
立即学习“前端免费学习笔记（深入）”；
.led {
width: 16px;
height: 16px;
background-color: #4ade80; /* 绿色默认状态 */
border-radius: 50%;
animation: breathe 3.5s ease-in-out infinite;
}
<p>.led.off {
animation: none;
opacity: 0.2;
}- 别忘了加
border-radius: 50%，方形块做呼吸灯会削弱“灯”的直觉 - 如果用
box-shadow模拟辉光（如box-shadow: 0 0 12px #4ade80），记得把 shadow 也放进@keyframes里同步缩放，否则光晕会僵硬 - 移动端要加
will-change: opacity防低端机掉帧，但仅限真正在闪的元素，别全局加
区分状态时避免直接改 background-color 干扰呼吸动画
很多开发者想用红/黄/绿切换表示不同状态，就写 .led.error { background-color: #f87171; } —— 这没问题，但若同时还在跑 breathe 动画，人眼会先注意到颜色突变，呼吸节奏就被掩盖了。
更稳妥的做法是：保持基础色不变，用 filter: hue-rotate() 微调色调，或叠加一层带透明度的伪元素遮罩。
.led.warning::after {
content: "";
position: absolute;
inset: 0;
background: rgba(251, 146, 60, 0.3);
border-radius: 50%;
}- 纯
hue-rotate()在深色背景下可能失真，慎用于灰黑系主题 - 如果状态色差异大（如红 vs 蓝），建议为每种状态单独定义一套
@keyframes（如breathe-red），比 runtime 计算 filter 更可控 - 切勿在动画中用
transition过渡background-color，CSS 动画与 transition 混用极易触发重排卡顿
在 JS 控制启停时注意 class 切换的时机
用 JS 控制灯的亮/灭/闪烁，常见错误是直接 element.classList.toggle("off")，但若此时动画正运行到半途，animation: none 会瞬间冻结当前 opacity 值，造成“卡在半亮”现象。
正确做法是：先移除动画，等下一帧再设 opacity，或用 getComputedStyle 读取当前值后平滑过渡。
function setLedState(el, isActive) {
if (isActive) {
el.classList.remove("off");
} else {
// 先停动画，再设终态
el.style.animation = "none";
el.classList.add("off");
// 强制重绘，让 off class 生效
void el.offsetWidth;
el.style.opacity = "0.2";
}
}- 别依赖
animationend事件来判断呼吸灯“完成一次”，它只在单次迭代结束触发，而infinite下永远不会触发 - 如果灯需响应用户点击暂停，用
animation-play-state: paused比删 class 更精准，且可随时 resume - SSR 渲染页面时，服务端无法执行 JS，初始状态必须靠 HTML class 决定（如
<div class="led led--online">），CSS 里用.led--online触发动画
呼吸灯看似简单，真正难的是让每一次明暗过渡都落在人眼最敏感的 300–500ms 缓动区间里，差 0.3 秒，就从「呼吸」变成「抽搐」。
