纯css无法实现点击点定位波纹，因:active无坐标信息且状态瞬时结束，@keyframes无法绑定clientx/clienty，所有纯css方案均固定从中心或左上角触发。
纯 CSS 实现不了真正点击哪就从哪扩散的波纹效果——:active 无法读取坐标，@keyframes 不能绑定 clientX/clientY，所有“纯 CSS 波纹”实际都固定从中心或左上角触发。
为什么 :active + transition 做不出可用的波纹
很多人写 :active { transform: scale(1.2) } 或给 ::after 加 transition，结果点下去没反应、动画播一半就回弹，或者 iOS 上完全不触发。原因很实在：
-
:active状态在松手瞬间就结束（通常 - iOS Safari 默认禁用
:active，需额外加touch-action: manipulation或cursor: pointer才可能启用 - 即使启用，
left/top无法在:active中动态计算，只能写死——点按钮左边和右边，波纹全从同一个位置炸开 - 连续点击时，多个
:active状态重叠，JS 无法清理旧动画，渲染层会堆积残留
必须用 ::after + JS 动态定位才能真还原点击点
核心是让 ::after 成为波纹载体：不占 DOM、支持硬件加速、能用 pointer-events: none 避免拦截后续点击。但前提是按钮本身得设 position: relative，否则 ::after 的 absolute 定位会相对于 body 偏移。
- 按钮必须加
position: relative和overflow: hidden（尤其圆角按钮，Safari 会裁切动画轨迹） -
::after要设content: ""、position: absolute、border-radius: 50%、z-index: -1、pointer-events: none - 圆心定位统一用
transform: translate(x, y)，别混用top/left——Safari 对混合定位合成不稳定 - 每次点击前先清掉旧值：
button.style.setProperty('--x', '0px')，否则新波纹从上一次位置起始 - 移动端必须监听
touchstart，取e.touches[0].clientX，click在 iOS 上有 300ms 延迟且坐标不准
Safari 和高 DPR 屏幕上的三个硬性修复点
动画卡顿、闪一下、边缘发虚？这些几乎都集中在 Safari（尤其 15.4 以下）和高分辨率屏上，不是换缓动函数能解决的：
- 给伪元素动态加
will-change: transform（别写在常态 CSS 里，JS 点击时才set），Safari 必须这个才触发硬件加速 - 避免小数像素缩放：计算
scale目标值时用Math.round()，比如scale(2.345)改成scale(2.3)，减少 subpixel 插值模糊 - 动画结束必须监听
animationend事件并调用element.remove()，不能靠setTimeout，真机上容易残留
真正难的从来不是写出第一版波纹，而是连点时的动画队列控制、Safari 的重绘 bug、以及移动端 touch 坐标与视口坐标的精准转换——这些细节不处理，用户一上手就会觉得“卡”“错位”“点不中”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
