纯CSS实现“水母式”呼吸发光按钮需用2–3层rgba() box-shadow叠加，仅动画alpha与模糊值，配cubic-bezier(0.34,1.1,0.66,1)缓动、4.2s周期及hsla色相±8°微变，禁用filter:blur()。
用 box-shadow 模拟呼吸发光，别碰 filter: blur() 做法
纯 CSS 实现“水母式”呼吸发光按钮，核心是控制多层 box-shadow 的透明度与模糊半径渐变，而非依赖 filter: blur()——后者在 Safari 和旧版 Chrome 中容易触发渲染抖动，且无法独立控制发光边缘的软硬度。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只用一层
box-shadow会显得单薄；推荐叠加 2–3 层，例如：0 0 10px rgba(120, 180, 255, 0.6)+0 0 25px rgba(80, 140, 255, 0.3)+0 0 45px rgba(40, 80, 220, 0.15) - 动画关键帧中，
opacity不参与动画——它会影响整个按钮，而呼吸感来自光晕的「胀缩」，不是明暗切换；应只对每层box-shadow的rgba()第四个参数（alpha）和模糊值做缓动 - 避免写
box-shadow: 0 0 20px #0af;这种无 alpha 的写法，硬光晕无法呼吸；必须用rgba()或hsla()控制透明度
@keyframes 呼吸节奏怎么调才不晕？用 ease-in-out 不够
人眼对 3–5 秒周期的缓慢明暗变化最舒适，“水母呼吸”理想周期是 4.2s 左右，且上升段（亮起）应略慢于下降段（收敛），模拟生物体自然张力释放。直接套 ease-in-out 会两端过急，中间拖沓。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 写死时间函数：用
cubic-bezier(0.34, 1.1, 0.66, 1)—— 这个贝塞尔曲线让光晕前 60% 时间缓慢扩张，后 40% 平滑收束，接近真实生物节律 - 别设
infinite就完事；加animation-fill-mode: forwards，防止鼠标悬停中断后光晕卡在半亮状态 - 如果按钮需响应点击，记得在
:active中临时animation-play-state: paused，否则按下去瞬间光还在“呼吸”，体验割裂
移动端触摸时发光失效？检查 will-change 和重绘层级
iOS Safari 和部分安卓 WebView 下，box-shadow 动画常被降级为静态渲染，尤其当父容器有 overflow: hidden 或按钮本身用了 transform: translateZ(0) 强制 GPU 加速但未配对处理时。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给按钮加
will-change: box-shadow（仅限动画元素，别滥用），并确保其父容器没有clip-path或mask-image - 避免在按钮上同时使用
backdrop-filter或border-radius超大值（如9999px），这两者会触发额外裁剪逻辑，吃掉外发光 - 真机调试时若发光消失，先在 DevTools 里勾选 “Rendering > Paint flashing”，看光晕区域是否被标红——没标红说明根本没绘制，大概率是层级或裁剪问题
颜色选错会让“水母感”变成“故障灯”，用 HSL 而非 HEX 控制色相漂移
真实水母发光不是固定蓝紫，而是带轻微色相浮动（比如从青蓝 → 紫蓝 → 回青蓝），纯 #0af 或 #36f 会显得机械。HEX 无法表达这种动态色相偏移，必须用 hsla()。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 主光晕用
hsla(210, 100%, 65%, 0.6)，外围光晕用hsla(240, 80%, 55%, 0.2)，并在动画中让色相值（第一个参数）在 ±8° 范围内缓动，例如210 → 218 → 210 - 别用
color: hsl(...)去影响文字——呼吸感只属于光晕；文字颜色保持高对比度（如#fff或#111），否则会被动态色相干扰可读性 - 深色背景下慎用低饱和度蓝（如
hsla(220, 20%, 70%, 0.5)），它会发灰，失去通透感；起始饱和度建议 ≥75%
真正难的不是让光“动起来”，而是让动得像活物——节奏、层次、色相微变，三者缺一不可。随便套个 glow 类名就交差，结果往往是电子蜡烛，不是水母。
