纯CSS的:active波纹总在按钮中心，因为:active是布尔状态伪类，无法获取clientX/clientY坐标，伪元素top/left只能写死或用50%居中；即使加transform: translate(-50%, -50%)，对齐的仍是父容器中心而非点击点。
为什么纯 CSS 的 :active 波纹总在按钮中心？
因为 CSS 无法读取鼠标坐标，:active 是状态伪类，不是事件处理器——它不接收 clientX/clientY，所有 ::after 的 top/left 只能写死或用 50% 居中。哪怕加了 transform: translate(-50%, -50%)，它对的也是父容器中心，不是点击点。
常见错误包括：
- 直接在
button:active里用background: radial-gradient(circle at center, ...)—— 这会覆盖原背景，且移动端常失效 - 漏设
position: relative在按钮上，导致::after脱离定位上下文 - 没加
overflow: hidden，波纹溢出后破坏布局
如何用 JS + CSS 变量精准定位波纹圆心？
不用动态创建 DOM 元素，只需在点击时算出相对偏移，注入两个 CSS 自定义属性，让动画读取即可。JS 只管坐标，CSS 管渲染，性能更稳。
关键步骤：
立即学习“前端免费学习笔记（深入）”；
- 监听
click事件，调用e.target.getBoundingClientRect() - 计算相对坐标：
const x = e.clientX - rect.left，const y = e.clientY - rect.top - 用
element.style.setProperty('--x', x + 'px')和--y注入 - CSS 中写
left: var(--x); top: var(--y); transform: translate(-50%, -50%) scale(0)
这样避免了频繁 append/remove span，也绕开了 touchstart/mousedown 双事件兼容问题。
transform: scale() 为什么比改 width/height 更可靠？
改 width/height 触发 layout（重排），尤其在密集按钮或低配设备上容易卡顿；transform 属于合成层操作，由 GPU 加速，动画更顺。
实操建议：
- 动画只作用于
transform和opacity，别碰top/left（已由 CSS 变量控制） - 关键帧里保持
transform: translate(-50%, -50%) scale(...)合并写法，避免分拆导致渲染异常 - 加
forwards保证动画结束后保持最终状态，再靠 JS 清除变量或复位 - 务必给波纹元素设
pointer-events: none，否则它会拦截后续点击
图片或非 button 元素怎么加波纹？
图片默认不触发 :active，<div> 也没有可激活语义，直接套伪类无效。必须包裹一层可交互容器，并手动赋予焦点能力。<p>推荐做法：</p>
<ul>
<li>用 <code><div class="ripple-container"><img src="..."></div> 包裹，设 position: relative; overflow: hidden; cursor: pointer;
tabindex="0" 或 role="button" 让键盘用户也能触发touch-action: manipulation 和 -webkit-tap-highlight-color: transparent
mousedown 和 touchstart，触屏时用 e.touches[0].clientX
真正难的不是实现，而是让波纹在圆角容器、高缩放比图片、滚动中固定定位的场景下仍精准裁剪——这时得配合 clip-path: inset(0 round 8px) 或用 border-radius 统一约束容器和波纹。
