径向渐变层叠加需明确角色分工、统一background-size、错位圆心、低透明度外层；优先用background-position动画并配will-change；三组动画周期错开；色标用十六进制alpha写法；加screen混合模式；贝塞尔曲线调飘逸感；预设起始位置。
径向渐变层怎么叠才不糊成一团
多个 radial-gradient 叠在一起时，如果尺寸、位置、透明度没对齐，动画一跑就变成灰蒙蒙的色块，根本看不出“波纹”感。核心不是层数多，而是每层必须有明确的「角色分工」：一层主波峰、一层补阴影、一层做远距离漫反射。
- 所有层统一用
background-size: 400% 400%，避免缩放不一致导致错位抖动 - 每层的圆心必须偏移不同百分比，比如
50% 50%、62% 48%、37% 53%，纯随机值反而破坏节奏 - 最外层渐变颜色建议用
rgba(255,255,255,0.03)起手，太浓会盖掉内层细节
transform 动画 vs background-position 动画哪个更稳
用 transform: translate() 移动整个元素来模拟波纹流动，看似直观，但会触发重排+重绘，尤其在移动端容易掉帧；而改 background-position 是纯合成层操作，GPU 友好得多。
- 必须给容器加
will-change: background-position，否则 safari 下动画仍可能卡顿 - 三组渐变要配三套独立
@keyframes，且周期错开（比如 12s / 15s / 18s），否则所有波纹同步起伏就变「呼吸灯」了 - 别用
%做background-position动画单位——它依赖容器宽高，响应式下会跳变；改用px或vw/vh
firefox 里波纹不动？检查 radial-gradient 的 color-stop 写法
Firefox 对 radial-gradient 的 color-stop 解析比 chrome 更严格：如果写成 rgba(255,255,255,0) 0%, transparent 70%，它可能把 transparent 当作无效值直接丢弃，结果只剩一个实心圆。
- 统一改用十六进制带 alpha 的写法，比如
#ffffff00替代transparent，#ffffff1a替代rgba(255,255,255,0.1) - 每层渐变至少写满 3 个色标：
起点色→过渡色（带微弱 alpha）→终点全透明，不能省略中间项 - 加一行
background-blend-mode: screen，能缓解 Firefox 渲染过暗的问题
动画卡顿或初始闪一下？关键在 timing-function 和起始态
波纹动画最怕「突兀启动」——页面加载完第一帧就猛地拉伸，或者循环衔接处有停顿感。这通常不是性能问题，而是贝塞尔曲线没调准 + 初始位置没预设。
立即学习“前端免费学习笔记（深入）”；
- 不用
ease-in-out，改用cubic-bezier(0.34, 1.56, 0.64, 1)，让波峰移动更「飘」，减少机械感 - 每个
background-position动画必须显式声明起始值，比如background-position: -100px -100px, -120px -80px, -90px -110px，否则首帧会从0 0突然跳过去 - 如果容器高度动态变化（比如文字撑开），务必用
background-attachment: fixed配合background-origin: content-box，否则波纹会随内容滚动错位
真正难的不是堆渐变层数，是每层的透明度衰减斜率、位移速度比、色标扩散范围这三者得咬合上——差 0.05 的 alpha 或 0.3s 的周期偏移，整体会立刻失去流动性。