Bootstrap按钮默认无波纹效果，纯CSS方案只能居中扩散因无法获取鼠标坐标；实现“点哪炸哪”需JS计算点击位置并写入CSS变量，配合transform:scale()GPU加速动画及定时清理伪元素。
Bootstrap 按钮默认没有波纹效果，官方 CSS 和 JS 都不提供 .ripple 类或任何 @keyframes ripple 规则。你看到的波纹，全是项目里自己加的。
为什么纯 CSS 的 :active + ::after 只能居中扩散
因为 CSS 无法读取鼠标点击坐标，:active 是个无状态伪类，它不接收事件参数。所以所有“纯 CSS 波纹”都只能靠 top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0) 锚定中心——无论你点哪，波纹都从正中间炸开。
- 这不是 bug，是能力边界：CSS 没有
event.clientX这种东西 - 如果你需要“点哪炸哪”，JS 必须介入，哪怕只写 3 行
- 漏掉
position: relative或overflow: hidden，波纹会飘出按钮甚至页面外
transform: scale() 为什么比 width/height 更关键
用 width 和 height 驱动波纹动画会触发浏览器重排（reflow），尤其在低端安卓机或 iOS Safari 上明显卡顿；而 transform: scale() 只影响合成层，走 GPU 加速，顺滑得多。
- 务必设
transform-origin: center，否则缩放中心偏移，波纹歪斜 - 初始值写
scale(0)，激活时设scale(3)或更大（确保覆盖按钮对角线） - 别忘了加
pointer-events: none到::after，否则快速连点可能被伪元素拦截
移动端 :active 失效时怎么补救
iOS Safari 对 :active 支持极差：要么不触发，要么延迟 300ms。纯 CSS 方案在手机上基本不可靠。
立即学习“前端免费学习笔记（深入）”；
- 必须监听
touchstart（不是click），并在 JS 中给按钮加临时 class，比如ripple-active - 对应 CSS 写成
.btn.ripple-active::after { transform: scale(3); opacity: 1; } -
touchend后立刻removeAttribute('class')或classList.remove('ripple-active')，否则波纹残留 - 别用
ontouchstart="this.classList.add(...)”写在 HTML 里——不利于维护和复用
如何让波纹精准响应点击位置（必须 JS）
核心是把 e.clientX - rect.left 和 e.clientY - rect.top 存进 CSS 自定义属性，再在 ::after 里用 left: var(--x); top: var(--y) 定位。
- JS 中先获取按钮区域：
const rect = btn.getBoundingClientRect() - 计算相对坐标：
const x = e.clientX - rect.left; const y = e.clientY - rect.top - 写入样式：
btn.style.setProperty('--x', x + 'px');和btn.style.setProperty('--y', y + 'px') - CSS 里写：
.btn-ripple::after { left: var(--x); top: var(--y); transform: translate(-50%, -50%) scale(0); } - 每次点击前清空旧值，避免残留坐标导致下一次波纹错位
真正容易被忽略的点是：波纹动画结束之后，::after 伪元素本身不会消失，它只是透明且缩到 0。如果用户高频点击，多个波纹状态会叠加，造成视觉粘滞或性能下降。稳妥做法是在 JS 中用 setTimeout(() => rippleEl.remove(), 600) 主动清理——哪怕你用的是伪元素方案，只要涉及坐标动态写入，就绕不开这一步。
