纯 css 可实现自然呼吸按钮，关键在于协同模拟光晕胀缩与体态起伏：用三段式 @keyframes 控制 opacity 和 ±2% 内 scale 变化，多层 box-shadow 替代 filter: blur()，配合 will-change、animation-play-state: paused 与差异化 animation-delay 实现真实呼吸感。
纯 CSS 就能做出自然的呼吸按钮，不需要 JS；关键不是让按钮“变亮变暗”，而是模拟光晕胀缩 + 体态起伏的协同感。
为什么只用 opacity 会像电源灯而不是呼吸灯
单独调 opacity 只改变明暗，缺乏体积变化的生理暗示。人眼对轻微缩放更敏感——哪怕只是 scale(0.98) → scale(1.02)，也会触发“它在呼吸”的直觉。
-
@keyframes必须设三段：0% 和 100% 状态一致（比如opacity: 0.4; transform: scale(0.97)），50% 或 65% 达峰值（opacity: 1; transform: scale(1.02)） - 别写
0% { opacity: 0.2 } 100% { opacity: 1 }这种跳变式，会导致动画断层或 Safari 下卡顿 - 缩放幅度控制在 ±2% 内，超过
scale(1.03)就容易看出形变，失去柔和感
box-shadow 光晕怎么叠才不糊、不抖
用多层 box-shadow 模拟发光边缘的软硬度，比单层或 filter: blur() 更稳——后者在 Safari 和旧 Chrome 中常触发重绘抖动，且无法独立控每层衰减。
- 推荐叠 2–3 层，例如：
0 0 8px rgba(100, 180, 255, 0.6), 0 0 20px rgba(80, 140, 255, 0.3), 0 0 40px rgba(40, 80, 220, 0.15) - 动画里只改每层的 alpha 值和模糊半径，别碰
opacity属性本身（它会影响整个元素） - 禁用
filter: blur()，尤其当父容器有overflow: hidden或按钮用了transform: translateZ(0)时，iOS Safari 很可能直接降级为静态渲染
移动端触摸失效？检查 will-change 和裁剪层级
iOS Safari 对 box-shadow 动画支持弱，常见原因是渲染层被意外裁剪或未声明变更属性。
- 给按钮加
style="will-change: box-shadow, transform;"（仅限动画元素，别滥用） - 确保父容器没用
clip-path、mask-image，也别设超大border-radius（如9999px），这些会吃掉外发光 - 如果按钮要响应点击，把动画写在
::before伪元素上，主按钮保留pointer-events: auto，避免样式与交互耦合
悬停时怎么暂停又不跳帧
鼠标移上去就停住呼吸，但不能回到初始状态——否则移开后会从头开始，显得机械。
- 用
animation-play-state: paused，不是display: none或visibility: hidden（它们会重置动画状态） - 必须配
animation-fill-mode: forwards，否则动画中断后可能卡在半亮/半缩状态 - 真机测试时连 Safari 开发者工具，看 Timeline 里
animation是否持续显示running，而非paused后就挂起
最易被忽略的是节奏错位：多个呼吸按钮放一起，如果 animation-delay 没差异化，同步脉动反而像系统故障——哪怕只差 0.3s，人眼就能感知“活物感”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
