mask-image 是实现涟漪效果的关键，因其利用 alpha 通道配合 radial-gradient 生成硬件加速的动态圆遮罩，兼容性好且支持边缘柔化；需加 -webkit-mask-image 前缀兜底，dom 必须用 js 动态创建绝对定位 span 并锚定点击点，动画中 opacity 须递减防残影，真机调试需关注 will-change、circle 语法及 z-index 问题。
为什么 mask-image 是实现涟漪效果的关键
纯 CSS 涟漪效果最头疼的是「圆形扩散裁剪」——不能靠 border-radius 或 clip-path: circle()，因为后者在多数安卓 WebView 和旧版 Safari 中动画卡顿甚至不触发重绘。mask-image 利用 alpha 通道做遮罩，配合 radial-gradient 生成动态圆，硬件加速更稳，且能精准控制边缘柔化（用 blur() 滤镜叠加）。
注意：必须加 -webkit-mask-image 前缀，iOS 15.4 之前和部分安卓 12 系统仍依赖它；mask-image 本身在 Chrome 112+ 已无需前缀，但兼容性兜底不能省。
点击时动态插入涟漪元素的 DOM 结构要点
不能直接在按钮上用 ::after 实现——伪元素无法响应 pointer-events 动态计算坐标，且多点触控下会错位。必须用 JS 创建真实 <span></span> 元素并 append 到按钮内：
- 元素需设
position: absolute，父容器加position: relative - left/top 坐标取
touchstart或mousedown的clientX/clientY减去父元素getBoundingClientRect()偏移 - 宽高统一设为父宽高的 2.5 倍（确保边缘扩散不被截断），初始
scale(0)，用transform-origin锚定点击点 - 务必在
touchend后 300ms 内移除该元素，避免内存堆积
mask-image 配合 @keyframes 的关键写法
核心是用径向渐变做 mask，并让半径从 0 扩展到足够大：
span.ripple {
-webkit-mask-image: radial-gradient(circle, black 0%, transparent 70%);
mask-image: radial-gradient(circle, black 0%, transparent 70%);
animation: ripple 600ms linear;
}
@keyframes ripple {
0% {
transform: scale(0);
opacity: 0.6;
}
100% {
transform: scale(1);
opacity: 0;
}
}
注意三点：
– 渐变中 black 是显示区，transparent 是隐藏区，顺序不能反
– 70% 是模糊过渡起点，调小会变硬边，调大会削弱中心强度
– opacity 必须随动画递减，否则收尾时残留半透明残影
真机调试最容易漏掉的三个坑
在 iPhone 14 Pro（iOS 17.5）和小米 13（MIUI 14.2）实测发现：
-
mask-image在transform: scale(0)瞬间可能被渲染引擎跳过，需加will-change: transform强制提升图层 - 安卓部分浏览器对
radial-gradient的circle at X Y语法支持差，必须用circle（无 at 定位），靠transform-origin控制中心 - 快速连点时，多个涟漪元素的
z-index可能错乱，建议统一设z-index: 1并禁用pointer-events: none防止拦截后续事件
涟漪不是动效炫技，而是用户操作确认的视觉契约——坐标算错 5px、收尾延迟 20ms，都会让人觉得“按钮没反应”。所有参数都得在真机上逐帧拖动调试，模拟器里看不出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
