纯CSS无法直接动画radial-gradient参数，因background-image不在可动画属性列表中；可行方案是用background-size过渡模拟“浮现”效果，或结合JS动态生成带坐标渐变的元素实现精准波纹。
直接用 radial-gradient 实现按钮点击波纹效果是可行的，但不是“开箱即用”的方案——它必须配合 :active 或 JavaScript 动态设置背景，且无法真正模拟从点击点扩散的动画，只能做中心出发的静态/伪动态表现。纯 CSS 径向渐变本身不支持动画关键帧（@keyframes 不能动画 radial-gradient 的位置或半径），所以实际中需绕道处理。
为什么不能直接动画 radial-gradient 的参数？
CSS 规范中，radial-gradient 属于 <image> 类型，而 background-image 不在可动画属性列表里（W3C 列表 明确排除）。即使你写 transition: background-image 0.3s，浏览器会静默忽略，不会报错，但也不会动。
常见误操作是这样写：
.btn:active {
background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.4) 0%, transparent 70%);
}
结果：点击瞬间“闪一下”，无过渡、无扩散感，因为没触发任何动画逻辑。
立即学习“前端免费学习笔记（深入）”；
用 radial-gradient 搭配 background-position 实现“类波纹”过渡
可行路径是把渐变当“纹理”，靠移动它的原点（background-position）制造位移错觉，再结合 background-size 控制覆盖范围。虽然不是真实扩散，但在某些 UI 场景下视觉足够接近。
-
background-image固定为一个大尺寸径向渐变（例如radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 100%)） - 初始
background-size设为0 0，background-position设为按钮中心（如50% 50%） -
:active时把background-size瞬间放大（如300% 300%），同时保持background-position不变 → 渐变从“看不见”变为“充满按钮” - 加上
transition: background-size 0.4s ease-out就有“浮现”感
示例代码：
.ripple-btn {
position: relative;
overflow: hidden;
background-color: #4a6fa5;
color: white;
border: none;
padding: 12px 24px;
border-radius: 6px;
}
<p>.ripple-btn::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: radial-gradient(circle, rgba(255,255,255,0.5) 0%, transparent 70%);
background-size: 0 0;
background-position: 50% 50%;
background-repeat: no-repeat;
opacity: 0.8;
transition: background-size 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
pointer-events: none;
}</p><p>.ripple-btn:active::before {
background-size: 300% 300%;
}
radial-gradient + JS：真正响应点击坐标的方案
如果必须用 radial-gradient 并精准响应鼠标点击位置，就得放弃纯 CSS，改用 JavaScript 动态生成一个 <span> 或伪元素，并内联设置其 background 为带坐标的渐变。
- 监听
click，用e.clientX - rect.left和e.clientY - rect.top计算相对坐标 - 创建
span，设position: absolute，top/left为计算值 - 设置
style.background为radial-gradient(circle at ${x}px ${y}px, rgba(255,255,255,0.5) 0%, transparent 100%) - 再通过
transition: transform 0.5s, opacity 0.5s配合scale(0)→scale(3)+opacity: 0完成扩散淡出
注意：radial-gradient 中的 at x y 值必须是像素单位（不能用百分比），否则无法对齐点击点；且该 span 必须在动画结束后手动 remove()，否则 DOM 泄漏。
容易被忽略的兼容性与性能点
radial-gradient 本身兼容性极好（IE10+），但问题常出在组合使用上：
- 旧版 Safari（≤13.1）对
background-size动画 + 渐变的支持不稳定，可能卡顿或跳变 - 大量按钮同时触发 JS 版波纹时，频繁创建/销毁元素会触发重排，建议加节流或复用
span元素池 - 不要给波纹层加
box-shadow或filter，这会强制 CPU 渲染，GPU 加速失效 - 若按钮有
border-radius，记得给波纹元素也设相同border-radius，否则圆角处会漏白
真正需要点击定位精度时，别硬套 radial-gradient；它适合做装饰性“高光浮现”，而不是交互反馈主逻辑。核心还是回到 transform: scale() + opacity 这一对 GPU 友好的组合。
