按钮点击无波纹的根本原因是:active伪类不支持动画，纯CSS波纹只能从按钮中心扩散；要实现点击位置发散需JS动态计算坐标并插入元素，同时注意移动端touch事件兼容与动画时长优化。
按钮点击时没有波纹，只变色或没反应
根本原因是 :active 伪类本身不支持动画（CSS 动画/过渡在 :active 中默认被忽略），直接写 transition: all 0.3s 在 :active 里不会触发波纹。波纹必须是「点击瞬间生成一个新元素」，靠伪元素或 JS 插入 span 模拟圆形扩散。
用 ::after 伪元素实现纯 CSS 波纹
这是最轻量、无需 JS 的方案，但有硬性前提：按钮必须是相对定位容器，且不能用 display: inline（得是 inline-block 或 block）。
- 给按钮加
position: relative - 用
button::after创建绝对定位的圆形，初始scale(0)、opacity: 0.2 - 在
button:active::after中设scale(1)，并配transition: transform 0.4s, opacity 0.4s - 关键：通过
top/left把圆心对齐鼠标点击位置——但纯 CSS 拿不到坐标，所以得固定中心（即波纹从按钮中心扩散）
示例关键样式：
button {
position: relative;
overflow: hidden;
}
button::after {
content: '';
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background: rgba(0,0,0,0.1);
transform: scale(0);
transition: transform 0.4s, opacity 0.4s;
pointer-events: none;
}
button:active::after {
transform: scale(1);
opacity: 0.2;
}要从点击位置发散波纹，必须用 JavaScript
浏览器不提供点击坐标的 CSS 变量，:active 也无法读取事件对象。所以真实「点击哪，波纹从哪起」只能靠 JS 动态计算并插入元素。
立即学习“前端免费学习笔记（深入）”；
- 监听
click事件，用e.clientX - button.getBoundingClientRect().left算出相对 X 坐标 - 同理算 Y，然后创建
span元素，设left/top为该坐标减去半径 - 立刻 append 到按钮内，再用
setTimeout延迟移除（避免 DOM 积压） - 注意：需设
pointer-events: none在波纹元素上，否则会拦截后续点击
常见漏掉的点：getBoundingClientRect() 返回的是视口坐标，不是相对于按钮的 offset，直接用 e.offsetX 更稳，但 IE 不支持；稳妥做法仍是手动减。
移动端点击延迟和波纹消失过快
在 iOS Safari 或部分安卓浏览器中，:active 伪类可能不触发（尤其未设置 cursor: pointer 或 touch-action: manipulation 时），导致纯 CSS 波纹失效；而 JS 方案若没处理 touchstart，手指按住不放时波纹就不出现。
- 给按钮加
touch-action: manipulation减少 300ms 延迟 - JS 方案建议同时监听
touchstart和mousedown，优先用touchstart的touches[0] - 波纹动画时间别低于
0.25s，否则视觉上像闪一下就没了；也别超过0.6s，否则用户松手后还在动，感觉滞后 - 真机调试时记得关掉 Chrome 的「Emulate touch events」，它模拟不准
波纹的本质是视觉反馈节奏——它得比点击响应快，但又得让人看清过程。坐标计算、事件绑定时机、动画时长这三处，任一错位都会让效果显得“卡”或者“没反应”。
