纯CSS无法实现点击位置波纹效果，因:active伪元素无法获取鼠标坐标；必须用JS计算点击偏移并设CSS变量，配合transform:translate(-50%,-50%)定位，再用overflow:hidden或clip-path裁剪。
纯 CSS 能做出波纹效果，但只能从按钮中心出发；要让波纹真正从鼠标点击位置扩散，必须用 JavaScript 获取坐标并动态控制。
为什么 :active + ::after 波纹总在正中间？
CSS 无法读取 clientX/clientY，:active 状态下伪元素的 top/left 只能写死或用 50% 居中。哪怕你给 ::after 加了 transform: translate(-50%, -50%) ，它也只认父容器中心，不认点击点。
常见错误是直接在按钮上写：button:active { background: radial-gradient(circle at center, rgba(0,0,0,0.2) 0%, transparent 50%); }——这会覆盖原有背景，且永远“炸”在中间，移动端还可能失效。
- 必须设
position: relative在按钮上，否则::after无法相对定位 -
::after必须有content: ""、position: absolute、border-radius: 50% - 动画优先用
transform: scale()，别改width/height，避免重排 - 加
pointer-events: none到伪元素，否则它会挡住后续点击
如何用 JS 动态定位波纹圆心？
核心不是“创建新元素”，而是算出点击点相对于按钮左上角的偏移值，并把它转成 CSS 可读的坐标。不需要每次新建 span，用 CSS 自定义属性更轻量。
立即学习“前端免费学习笔记（深入）”；
示例逻辑（绑定在 button.ripple-btn 上）：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
button.addEventListener('click', e => {
const rect = e.currentTarget.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
e.currentTarget.style.setProperty('--x', `${x}px`);
e.currentTarget.style.setProperty('--y', `${y}px`);
});对应 CSS 只需：
button.ripple-btn::after {
left: var(--x);
top: var(--y);
transform: translate(-50%, -50%) scale(0);
animation: ripple 400ms ease-out forwards;
}- 移动端必须监听
touchstart，iOS Safari 对click有 300ms 延迟，且clientX在 touch 事件里叫touches[0].clientX - 不要用
e.offsetX/e.offsetY：它们受 padding 影响，且在某些浏览器中不可靠 - 如果按钮有
border或padding，getBoundingClientRect()已包含这些，无需额外减
overflow: hidden 和 clip-path 怎么选？
波纹动画超出按钮边界时，得裁掉。两者都能裁，但行为不同：
-
overflow: hidden是最常用方案，简单有效，但对圆角按钮（border-radius）裁切不精准，波纹边缘可能被硬切出直角 -
clip-path: inset(0 round var(--radius))能完美贴合圆角，但需要把按钮的圆角值同步为 CSS 变量，比如--radius: 8px - 若按钮尺寸动态变化（如响应式），
clip-path比overflow: hidden更可控，尤其配合max-width使用时
注意：clip-path 在旧版 Safari 中需加 -webkit-clip-path 前缀，而 overflow: hidden 兼容性更好。
动画性能与 DOM 堆积风险
每次点击都 document.createElement('span') 并 append，短期没问题，长期容易造成内存泄漏或卡顿，尤其在高频点击场景（比如轮播控制器、音量调节）。
- 推荐复用策略：提前创建 3–5 个
span.ripple放在按钮内部，点击时只修改其style.left/style.top，再classList.add('active')触发动画，结束用animationend移除 class - 避免在动画中读写 layout 属性（如
offsetTop），否则触发强制同步布局（forced reflow） - 动画时长控制在 300–450ms，
cubic-bezier(0.25, 0.46, 0.45, 0.94)比ease-out更自然 - 别忘了给波纹元素加
pointer-events: none，否则它可能拦截下一次点击
最易被忽略的一点：波纹颜色应随主题自动适配，而不是写死 rgba(255,255,255,0.3)。用 color-mix(in srgb, currentColor 30%, transparent) 或 CSS 变量统一管理更可持续。
