CSS变量如何实现按钮点击的波纹效果_通过JS定位并更新变量坐标

作者：袖梨 2026-06-24

<p>必须用 getBoundingClientRect() 计算点击坐标，因 e.offsetX 在 IE 中不支持且在 transform、scale 或 iframe 中不可靠；需用 clientX - rect.left 算出相对按钮的 x 偏移，再通过 setProperty('--x', x + 'px') 写入带单位的 CSS 变量，配合伪元素 translate(-50%,-50%) 锚定波纹中心。</p>

纯 CSS 变量无法直接响应点击事件，必须靠 JS 把 e.clientX 和 e.clientY 转成按钮内坐标，再写入 --x / --y 才能驱动波纹从点击点扩散——漏掉这一步，波纹永远只从中心炸开。

为什么必须用 `getBoundingClientRect()` 算坐标，不能直接用 `e.offsetX`

因为 e.offsetX 在 IE 中不支持，且在有 transform、scale 或 iframe 嵌套的容器里返回值不可靠。真实项目中 90% 的波纹偏移都源于没做坐标归一化。

button.getBoundingClientRect() 返回按钮左上角相对于视口的位置（left/top）
用 e.clientX - rect.left 得到 X 方向相对按钮的偏移，Y 同理
如果按钮在滚动容器里，还要减去 container.scrollTop（但多数情况只需减 rect.top）
最终设为 button.style.setProperty('--x', x + 'px')，单位必须显式带 px，否则 CSS 里 var(--x) 无法参与定位计算

`button::after` 如何读取并精准锚定到 `--x` / `--y`

伪元素不能用 attr(data-ripple-x) 读取坐标——Safari 不支持，且不支持单位运算；唯一可靠方式是用 CSS 变量 + transform: translate(-50%, -50%) 把圆心拉到点击点。

伪元素必须设 position: absolute; top: 0; left: 0;，否则 var(--x) 会相对于内容盒而非边框盒解析
CSS 中写 left: var(--x); top: var(--y); transform: translate(-50%, -50%) scale(0);
千万别漏 border-radius: 50%，否则是方块扩散
每次点击前要重置变量：button.style.setProperty('--x', '0px')，否则连续点击时新波纹从旧位置起始

动画触发和清理的关键时机

仅靠 :active 触发波纹动画不可靠：移动端可能不触发，鼠标抬起过快会导致动画中断，且无法控制多点点击。

立即学习“前端免费学习笔记（深入）”；

JS 中应添加临时类如 is-rippling，CSS 写 .btn.is-rippling::after { transform: scale(1); opacity: 0; }
监听 animationend 事件移除类，而不是用 setTimeout——浏览器动画帧可能延迟，setTimeout 容易误判
快速连点需节流：if (button.rippling) return; button.rippling = true;，动画结束再置 false
务必加 pointer-events: none 到伪元素上，否则波纹层会拦截后续点击