button默认无波纹效果，需用position: relative配合::after伪元素模拟；通过JS计算点击坐标并动态设置left/top实现精准扩散，transition比@keyframes更可控。
button 元素默认不支持 :active 波纹，必须用 position: relative + 伪元素模拟
原生 <button></button> 点击时只有简单的背景色变化或压感，无法实现中心扩散的波纹。CSS 原生没有 ripple 属性，所谓“波纹”本质是用 ::after 伪元素画一个圆形，通过 transform: scale() 和 opacity 动画控制显隐与大小。
关键前提是：按钮必须有 position: relative，否则伪元素无法相对于按钮定位；同时需禁用默认聚焦 outline（避免干扰视觉）。
-
overflow: hidden必须加在 button 上，否则波纹圆会溢出边框 - 伪元素
content: ""、position: absolute、border-radius: 50%是基础三件套 - 动画要设
pointer-events: none，否则可能拦截后续点击
计算波纹圆心位置要用 getBoundingClientRect() + clientX/clientY
CSS 无法直接获取鼠标点击坐标，纯 CSS 方案只能做“居中波纹”（即固定从按钮中心出发）。如果要真实点击哪就从哪扩散，必须用 JS 获取点击位置并动态设置伪元素的 left 和 top。
常见错误是直接用 e.offsetX/e.offsetY——它们在带 padding 的 button 上不准；正确做法是用 e.clientX - rect.left 计算相对坐标。
立即学习“前端免费学习笔记（深入）”；
- 先调
button.getBoundingClientRect()得到视口位置 - 再用
e.clientX - rect.left和e.clientY - rect.top算点击点偏移 - 把这两个值设为伪元素的
left和top，单位为px - 记得重置时清空 inline style，否则下次点击位置错乱
用 transition 实现波纹比 @keyframes 更轻量且可控
多数教程用 @keyframes ripple 配合 animation，但这样每次点击都要触发新动画，难以中断或复用。更稳妥的做法是只设 transition，靠 JS 控制 class 切换来触发动画。
好处是：可随时用 element.classList.remove("ripple-active") 中止动画；兼容性更好（transition 支持远高于复杂 animation）；也方便配合 prefers-reduced-motion 做动效降级。
- 伪元素初始状态：
opacity: 0; transform: scale(0) - 激活 class（如
.ripple-active）里设：opacity: 0.2; transform: scale(3) - transition 写在伪元素上：
transition: opacity 0.4s, transform 0.4s - JS 中先添加 class，再用
setTimeout(() => el.classList.remove(...), 400)清理
移动端点击延迟和重复触发会导致波纹错乱
在 iOS Safari 或部分安卓 WebView 中，click 事件有约 300ms 延迟，且可能触发两次（click + touchend），造成波纹闪两次或位置偏移。
解决方案不是禁用 click，而是统一监听 pointerdown，并检查 e.button === 0（排除右键）和 e.isPrimary（排除多点触控干扰）。
- 绑定事件用
button.addEventListener("pointerdown", handler)，不是click - 在 handler 开头加
if (e.button !== 0 || !e.isPrimary) return - 添加
touch-action: manipulation到 button，减少延迟并禁止缩放 - 避免在波纹动画进行中再次响应 pointerdown，可用节流或标记
isRippling
真实项目里最容易被忽略的是波纹尺寸适配：小按钮（比如 24×24 的图标按钮）需要更小的 max-width 和更快的 transition-duration，否则圆会撑满整个容器甚至溢出。别指望一套 CSS 参数通吃所有按钮尺寸。
