按钮点击波纹效果用::after而非::before，因其默认渲染在内容层之上且z-index控制更稳，而::before在旧版Safari中transform动画支持不稳定；需绝对定位、content: ""、父元素relative，配合JS计算点击坐标并设置left/top，再通过transform-origin: center实现中心扩散。
按钮点击波纹效果为什么用 ::after 而不是 ::before
因为 ::after 默认渲染在元素内容层之上，且更容易通过 z-index 控制层级；而 ::before 在某些旧版浏览器（如 Safari 12.1 之前）中对 transform 动画的支持不稳定。实际项目中只要确保伪元素是绝对定位、透明度初始为 0，并覆盖整个按钮区域就行。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给按钮加
position: relative，否则::after的absolute定位会相对于 body -
::after必须设content: ""，否则不渲染 - 避免用
border-radius直接套在伪元素上——它会导致波纹边缘锯齿，应改用overflow: hidden在父按钮上裁切
:active 状态下直接触发 scale 动画为什么经常“闪一下就没了”
因为 :active 是瞬时状态，手指一抬就消失，动画没时间播完。纯 CSS 方案必须配合 transition + transform 的延迟播放逻辑，不能依赖 :active 自身的生命周期。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把波纹动画从
:active移到 class 切换上（比如 JS 添加ripple-active类） - 伪元素的
transition写在常态里：transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s; - 不要用
animation+@keyframes回放多次——用户连续点击会堆积动画，造成卡顿或错位
如何让波纹从点击坐标中心扩散而不是从按钮左上角开始
靠 JS 获取点击位置并动态设置 ::after 的 left 和 top，否则默认居左上。CSS 本身无法读取事件坐标，这一步绕不开 JS。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听
click事件，用e.clientX - button.getBoundingClientRect().left算出相对 X - 伪元素的
left/top设为calc(var(--x) * 1px)，但注意：CSS 变量不能直接参与 calc 运算，得用 JS 设置style.setProperty('--x', x) - 别忘了把伪元素
transform-origin设为center，否则scale会以左上为基点拉伸 - 移动端要监听
touchstart，且防止click二次触发，加e.preventDefault()或节流
Chrome 120+ 和 Firefox 125 下波纹突然变模糊或边缘发虚
这是 subpixel 渲染问题：当缩放值不是整数（比如 scale(2.3)）且元素尺寸含小数像素时，浏览器会插值抗锯齿，导致波纹像蒙了层灰。尤其在高 DPR 屏幕上更明显。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 强制波纹容器尺寸为偶数像素（比如设
width: 200px; height: 200px;），再用transform: scale(1)做基准 - 避免用
%或rem控制伪元素大小，改用px或vw/vh配合 JS 动态计算 - 加
will-change: transform在伪元素上，提示浏览器启用独立图层，减少重绘模糊
波纹效果看着简单，真正落地时坐标计算、图层合成、DPR 适配三者稍有偏差，就会出现偏移、撕裂或延迟响应。这些细节没法靠一套 CSS 通吃，得结合具体容器和交互节奏调。
