纯CSS只能实现居中波纹，无法从点击点出发；因:active无坐标信息、CSS无法读取clientX/clientY，所有纯CSS方案均固定从中心或左上角触发，必须用JS计算点击坐标并动态控制::after定位与动画。
纯 CSS 能做出波纹点击效果，但只能从按钮中心扩散；要让波纹真正从鼠标点击位置出发，必须用 JavaScript 获取坐标——这是硬限制，不是技巧问题。
为什么 :active + ::after 波纹总在正中间
CSS 无法读取 clientX/clientY，:active 状态下伪元素的 top/left 只能写死或用 50% 居中。哪怕加了 transform: translate(-50%, -50%)，它也只认父容器中心，不认点击点。
常见错误包括：
- 直接在按钮上写
button:active { background: radial-gradient(circle at center, rgba(0,0,0,0.2) 0%, transparent 50%); }——这会覆盖原有背景，且永远“炸”在中间 - 漏设
position: relative在按钮上，导致::after相对于 body 定位，波纹飞出按钮外 - 没加
overflow: hidden，波纹扩散时溢出边界，视觉失控
::after 伪元素实现中心波纹的关键参数
这是最轻量、兼容性最好的方案，适合对定位精度无要求的场景（如移动端大按钮、设计稿明确要求居中反馈）。
立即学习“前端免费学习笔记（深入）”；
核心配置要点：
- 按钮必须有
position: relative和overflow: hidden -
::after必须含content: ""、position: absolute、border-radius: 50% - 动画优先用
transform: scale()，别改width/height，避免重排 - 加
pointer-events: none到伪元素，否则它会挡住后续点击 - 缓动函数建议用
cubic-bezier(0.25, 0.46, 0.45, 0.94)或ease-out，比linear更自然
示例片段：
button {
position: relative;
overflow: hidden;
}
button::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
transition: transform 0.35s ease-out, opacity 0.35s ease-out;
pointer-events: none;
}
button:active::after {
transform: translate(-50%, -50%) scale(3);
opacity: 0;
}
快速连点时波纹重叠怎么处理
纯 CSS 方案没有事件控制逻辑，:active 状态可能叠加或残留，尤其在快速点击或触摸屏上。
缓解方式有限，但可降低干扰：
- 把动画时长控制在
0.3s–0.4s内，减少视觉滞留 - 用
opacity配合scale，让波纹淡出而非突兀消失 - 避免在
:hover中同时触发波纹，防止悬停+点击双重触发 - 如果按钮需高频交互（如计数器、游戏 UI），纯 CSS 波纹就不合适，应切到 JS 动态方案
真正需要“点击在哪、涟漪就从哪起”的场景，CSS 自定义属性（--x/--y）+ JS 坐标注入是当前最平衡的解法：JS 只负责记坐标，动画仍由 CSS 驱动，既精准又保性能。这点容易被忽略——不是“不用 JS 就高级”，而是“JS 该干啥、CSS 该干啥”要分清。
