纯HTML无法实现响应点击位置的动态波纹，必须结合CSS伪元素::after与JavaScript坐标计算；需用getBoundingClientRect()获取相对坐标、约束范围、添加will-change、overflow:hidden、animation-fill-mode:forwards，并每次点击前清除上一动画。
纯 HTML 无法实现真正响应点击位置的动态波纹——必须配合 CSS 伪元素 + JavaScript 坐标计算，否则波纹只会固定居中或根本不动。
为什么::after是唯一靠谱的选择
伪元素必须用 ::after，不是习惯问题，而是渲染层叠和兼容性硬约束：::before 在旧版 Safari（iOS 15 及更早）中对 transform: scale() 动画支持异常，容易卡顿或不触发；::after 默认渲染在内容层之上，配合 z-index: -1 能稳稳压在文字/图标下方又不遮挡交互。漏掉 content: "" 或没给按钮加 position: relative，波纹会直接消失或飞出屏幕。
getBoundingClientRect()坐标计算不能只写clientX
移动端必须用 event.touches[0]，桌面端用 event.clientX，但两者都得减去按钮自身的偏移。常见错误是直接写 left: e.clientX + 'px'，结果波纹总从左上角炸开。
- 先取按钮边界：
const rect = button.getBoundingClientRect() - 再算相对坐标：
const x = e.touches ? e.touches[0].clientX - rect.left : e.clientX - rect.left - 必须约束范围：
Math.max(0, Math.min(x, rect.width - 20))，避免圆心超出按钮导致波纹“从外往里挤”
Safari 波纹卡顿的三个强制操作
iOS Safari（尤其 15 及更早）对 ::after + transform 组合有重绘 bug，不手动兜底，真机上大概率闪烁或不动。
立即学习“前端免费学习笔记（深入）”；
- 伪元素必须加
will-change: transform，不能省 - 圆心定位统一用
transform: translate(x, y) scale(s)，严禁混用top/left和transform - 按钮父级加
overflow: hidden，且若按钮本身有border-radius，这个overflow: hidden更不能少——否则 Safari 会裁切动画轨迹
动画结束就回退？animation-fill-mode: forwards是关键
用 @keyframes 而非 transition，是因为波纹需要三段变化：出现 → 放大 → 淡出。但动画播完后如果状态回退，就会看到波纹缩回原点再消失，非常假。
- 必须在伪元素上写：
animation: ripple 600ms cubic-bezier(0.2, 0, 0.1, 1) forwards - 关键帧里不要动
width/height，只改transform和opacity，起始opacity: 0.3，结尾opacity: 0 - 每次点击前清掉上一个动画：
rippleEl.style.animation = 'none'; rippleEl.offsetHeight; rippleEl.style.animation = 'ripple 600ms...'，否则连点会堆积错位
真正卡住人的永远不是怎么写动画，而是 Safari 的渲染逻辑、连点时的状态清理、以及坐标计算里那几像素的越界——这些点不手动设防，效果在真机上基本不可用。
