纯用mask-image无法实现点击水波纹，因其不支持动态锚点与逐帧缩放；可行方案是::after伪元素+radial-gradient背景+js动态定位，其中渐变仅静态填充，动画仅控制transform:scale()和opacity。
纯用 mask-image 做点击水波纹不可行——它不支持基于点击坐标的动态锚点，也没法触发逐帧缩放动画；真正能落地的方案仍是 ::after 伪元素 + radial-gradient 背景 + JS 动态定位，mask-image 在这里只适合静态遮罩或波浪边框这类固定形态场景。
为什么不能用 mask-image 实现点击波纹
mask-image 的作用是“裁剪可见区域”，它本身没有位置响应能力，也不能随 transform 动画实时重绘遮罩形状。你没法写 mask-position: var(--x) var(--y) 并在 JS 里动态更新它来模拟落点波纹——CSS 变量无法驱动 mask-position 的动画（实测 Chrome/Firefox 均不生效）。更关键的是，mask-image 的渐变中心固定在元素盒模型内，无法像伪元素那样用 left/top 精确落到 clientX/clientY 像素点。
radial-gradient 在波纹中只负责“填色”，不参与动画
很多人以为波纹动画靠 @keyframes 改变 background-image: radial-gradient() 的圆心或半径，这是典型误区。浏览器不会对渐变参数做插值动画，强行写会直接失效或触发全量重绘（paint），导致掉帧。正确做法是：
-
radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%)写死在伪元素默认样式里，仅作一次性填充 - 动画只控制
transform: scale()和opacity，用@keyframes ripple定义从scale(0) opacity: 1到scale(4) opacity: 0 - 必须加
animation-fill-mode: forwards，否则动画结束瞬间伪元素会“弹回”初始状态，造成视觉闪动
JS 动态定位伪元素的三个硬性前提
波纹要从真实点击点出发，不是按钮中心，JS 必须完成三件事：
- 监听
click事件时调用getBoundingClientRect()，算出clientX - rect.left和clientY - rect.top - 给按钮设
position: relative，否则::after的top/left会相对于body或其他定位祖先计算，偏移失控 - 伪元素需设
position: absolute; width: 200px; height: 200px; border-radius: 50%;（尺寸要够大，确保扩散不被截断），再通过style.left = x + 'px'和style.top = y + 'px'设置起始位置
容易被忽略的 Safari 和安卓兼容细节
伪元素初始设 width: 0; height: 0; 在 Safari 16+ 和部分安卓 WebView 里会导致 transform: scale(0) 失效或渲染异常，必须改用 transform: scale(0) + opacity: 0 双保险，且不能省略 will-change: transform, opacity。另外，radial-gradient 的颜色停止点要避开整数百分比（比如写 70.01% 而非 70%），否则某些旧版 Chromium 会渲染出硬边而非柔和过渡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
