纯CSS3无法实现真正可用的水波纹点击交互动效，因其无法获取click事件坐标、计算元素内相对定位或动态确定圆心；:active伪类不记录点击位置，@keyframes动画静态不可变，iOS Safari中:active还常延迟或失效。
纯 CSS3 无法实现真正可用的水波纹点击交互动效——因为 click 事件坐标、元素内相对定位、动态圆心计算这三件事，CSS 根本做不到。
为什么 :active 或纯 @keyframes 都不行
:active 只能触发全局样式切换，不记录点击位置；@keyframes 动画本身是静态定义的，没法把 e.clientX 和 e.clientY 塞进去。iOS Safari 上 :active 还经常延迟或不触发，移动端基本不可靠。
常见错误现象：涟漪总从左上角炸开、点哪都一个位置、快速连点堆满 DOM 节点、动画一闪就消失。
- 伪类无法获取点击坐标，这是硬限制，不是写法问题
- 用
background: radial-gradient()+transition模拟，会因重绘导致卡顿，且圆心只能写死（比如at 50% 50%），无法跟随手指 - 不设
pointer-events: none的涟漪节点会拦截后续点击，造成“点不动”假象
必须用 JS 获取坐标并创建 ripple 节点
核心逻辑是：监听 click，算出相对于目标元素内部的 x/y，动态创建 <span class="ripple"></span> 并 append 到该元素内部。
立即学习“前端免费学习笔记（深入）”；
关键代码片段：
function createRipple(e) {
const target = e.currentTarget;
const rect = target.getBoundingClientRect();
const x = e.clientX - rect.left - parseFloat(getComputedStyle(target).borderLeftWidth || '0');
const y = e.clientY - rect.top - parseFloat(getComputedStyle(target).borderTopWidth || '0');
<p>const ripple = document.createElement('span');
ripple.className = 'ripple';
ripple.style.left = <code>${x}px</code>;
ripple.style.top = <code>${y}px</code>;
target.appendChild(ripple);</p><p>// 动画结束后清理
ripple.addEventListener('animationend', () => {
ripple.remove();
});
}- 一定要减去
borderLeftWidth和borderTopWidth，否则有边框时中心偏移 - 目标元素必须已设
position: relative，否则left/top会以页面为基准定位 - 别用
document.body.appendChild，涟漪必须在目标元素内部才受其overflow: hidden约束
CSS 动画参数怎么设才不突兀
涟漪不是越快越好，也不是越大越炫。实测最自然的组合是：
.ripple {
position: absolute;
border-radius: 50%;
background: rgba(0, 0, 0, 0.15);
transform: translate(-50%, -50%);
pointer-events: none;
animation: ripple-effect 0.6s ease-out forwards;
}
<p>@keyframes ripple-effect {
0% {
width: 0;
height: 0;
opacity: 0.7;
}
100% {
width: 300px;
height: 300px;
opacity: 0;
}
}-
width/height初始为0，不是1px，否则缩放前会“闪一下” - 最大尺寸设
300px是安全值；太大容易溢出按钮区域，尤其圆角按钮 -
ease-out比linear更符合物理衰减感；0.5–0.7s是人眼感知最舒服的区间 - 透明度起始
0.7、结束0，中间不设中间帧，避免动画引擎插值不准
防多次点击和 iOS 兼容要点
移动端手指面积大，连点不可避免；iOS Safari 对 click 事件有约 300ms 延迟，还可能触发两次。
- 加防抖：
if (target.hasAttribute('data-ripple-active')) return;，动画开始前标记，结束时清除 - 监听
animationend而非setTimeout，避免时间不准残留节点 - 给目标元素加
touch-action: manipulation，可减少 iOS 上的点击延迟 - 不要依赖
mousedown或touchstart，它们和click坐标体系不一致，容易偏移
最常被忽略的其实是 border 和 transform —— 一旦目标元素有 transform: scale(0.95) 或 border: 2px solid #ccc，而 JS 里没校正，涟漪就永远不在点击正中心。
