在bootstrap 5中为按钮添加发光呼吸灯动效，核心做法是利用css的 @keyframes 定义透明度与阴影变化，并通过 animation 属性将其应用到按钮类上。具体实现时，需自定义一个包含 box-shadow 和 opacity 变化的关键帧动画，并将其绑定到按钮元素，同时配合 transition 确保状态切换平滑。此方法不依赖javascript，仅通过纯css即可实现持续的呼吸效果。
如何定义呼吸灯的关键帧动画
定义呼吸灯动画需要创建一组关键帧，模拟光晕的强弱交替。通常使用 @keyframes 规则，在0%和100%时设置较弱的阴影和较低的透明度，在50%时设置较强的阴影和较高的透明度。例如，定义名为 breathe 的动画，使其在两个状态间平滑过渡，从而产生呼吸感。
/* CSS代码示例 */
@keyframes breathe {
0%, 100% {
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
opacity: 0.8;
}
50% {
box-shadow: 0 0 20px rgba(0, 123, 255, 0.9), 0 0 10px rgba(0, 123, 255, 0.6);
opacity: 1;
}
}
.btn-breathe {
animation: breathe 2s infinite ease-in-out;
}
上述代码定义了 breathe 动画，每2秒循环一次。应用该类后，按钮会持续显示发光效果。若需改变颜色，只需调整 rgba 中的RGB值。注意，box-shadow 的多层叠加可增强光晕的真实感。
立即学习“前端免费学习笔记（深入）”；
如何结合Bootstrap类名应用动效
将自定义动画类与Bootstrap按钮类结合使用时，需注意样式优先级。Bootstrap的按钮类如 .btn-primary 已包含基础样式，自定义类应追加其后以确保动画生效。此外，为避免与其他交互状态（如悬停）冲突，可限制动画仅在特定条件下触发，或通过 !important 强制覆盖（谨慎使用）。
<button type="button" class="btn btn-primary btn-breathe">呼吸按钮</button>
HTML结构中，按钮同时应用 btn、btn-primary 和自定义的 btn-breathe 类。浏览器解析时，由于 btn-breathe 在DOM中位于最后，其动画属性会正常应用。若需暂停动画，可通过JS添加 animation-play-state: paused 类，但本例仅展示纯CSS方案。
当按钮处于禁用状态时动效是否继续
当按钮被设置为禁用状态（即添加 disabled 属性或 .disabled 类）时，呼吸灯动效默认仍会继续播放，因为CSS动画不受HTML属性控制。若需禁用动效，需额外添加条件判断，例如通过JS移除动画类，或在CSS中使用 :disabled 选择器覆盖动画属性。
.btn-breathe:disabled {
animation: none;
opacity: 0.5;
}
上述CSS规则针对禁用状态的按钮，移除动画并降低透明度，使其视觉上呈现非活跃状态。实际应用中，可根据需求决定是否保留禁用时的动效，以符合用户体验设计原则。
