纯CSS无法实现点击位置扩散的涟漪效果，必须用JS获取点击坐标并设为CSS变量，再通过calc()绑定到::after伪元素；需监听click/touchstart、用getBoundingClientRect()计算相对偏移、设置position:relative和overflow:hidden，并注意单位转换与移动端兼容。
纯 CSS 无法获取鼠标点击坐标，所以「从点击位置出发扩散」的涟漪效果必须靠 JS 配合。核心在于：用 JS 算出 e.clientX 和 e.clientY 相对于按钮左上角的偏移，再把这组值设为 CSS 自定义属性（--x、--y），让 ::after 伪元素通过 left 和 top 绑定它们。
为什么不能只用 :active + ::after 实现精准定位
因为 :active 伪类不携带坐标信息，::after 只能固定在中心（比如 left: 50%; top: 50%）或铺满全按钮（width: 100%; height: 100%）。你看到的“每次都从中间扩散”，就是这个原因。
常见错误现象：
• 涟漪始终从按钮正中心炸开，和点击位置无关
• 在移动端 touch 事件下完全不触发（没监听 touchstart）
• 多次快速点击时涟漪重叠、卡顿、不销毁
- 必须给按钮加
position: relative，否则::after的absolute会相对于 body 定位 - 必须设
overflow: hidden，否则涟漪放大时会溢出按钮边界 - 不要用
transform: translate(-50%, -50%)去居中——它会让--x/--y失效，改用left: calc(var(--x) * 1px); top: calc(var(--y) * 1px)
getBoundingClientRect() 是算坐标的唯一可靠方式
别用 e.offsetX/e.offsetY：它们在 Firefox 中对 flex/grid 子项行为不一致；也别用 e.layerX（已废弃）。getBoundingClientRect() 返回的是元素在视口中的绝对矩形，再减去事件坐标，就能得到相对偏移。
实操建议：
- 计算逻辑必须写在事件回调里，不能提前缓存
rect—— 按钮可能被滚动、重排、动画位移 - 移动端要同时监听
touchstart，并取e.touches[0]的坐标，而非e.clientX - 为避免重复创建/更新，推荐每次点击先
ripple.remove()再新建，而不是复用同一个::after
示例关键片段：
btn.addEventListener('click', e => {
const rect = btn.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
btn.style.setProperty('--x', x);
btn.style.setProperty('--y', y);
// 触发 transition
btn.classList.add('ripple-trigger');
setTimeout(() => btn.classList.remove('ripple-trigger'), 600);
});
CSS 变量 + calc() 绑定位置的写法细节
直接在 ::after 里写 left: var(--x) 不行——CSS 变量是字符串，而 left 需要带单位的数值。必须用 calc(var(--x) * 1px) 强制转换单位。
容易踩的坑：
-
var(--x)如果未初始化，会变成invalid value，导致整个声明失效 - 不要写成
left: calc(var(--x) px)—— 缺少乘号，语法错误 - 如果按钮有 padding 或 border，
getBoundingClientRect()已包含它们，无需额外加减 - 动画 duration 要和 JS 的
setTimeout严格一致，否则视觉脱节
CSS 示例：
.ripple-btn {
position: relative;
overflow: hidden;
--x: 0;
--y: 0;
}
.ripple-btn::after {
content: '';
position: absolute;
width: 10px; height: 10px;
background: rgba(0,0,0,0.2);
border-radius: 50%;
left: calc(var(--x) * 1px);
top: calc(var(--y) * 1px);
transform: translate(-50%, -50%);
scale: 0;
transition: scale 0.6s ease-out, opacity 0.6s ease-out;
}
.ripple-btn.ripple-trigger::after {
scale: 4;
opacity: 0;
}
移动端 touch 事件的兼容处理要点
PC 端 click 事件在 touch 设备上会有约 300ms 延迟，且可能触发两次（touchstart + click）。所以生产环境必须分离处理。
实操建议：
- 监听
touchstart替代click，并在{passive: true}下绑定，避免阻塞滚动 - 用
event.touches[0].clientX替代e.clientX，确保取到真实触点 - 加防抖：在
touchstart回调开头加if (e.cancelable) e.preventDefault()防止误触发默认行为 - 别忘了在
touchend或touchcancel时清理涟漪 DOM 或 class，否则残留
最易被忽略的一点：当按钮处于 transform: scale() 或 position: fixed 等非标准布局上下文中，getBoundingClientRect() 仍准确，但 e.clientX 是视口坐标——两者相减依然成立，不用额外修正。这点常被误以为要“反向还原 transform”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
