纯css3无法实现“点击哪、从哪起”的水波纹特效，必须用js获取点击坐标并动态注入css变量或style属性；因:active瞬时失效、无坐标信息、不支持三阶段动画，且ios safari默认禁用，需position:relative+::after+getboundingclientrect()计算相对偏移，并配合will-change、overflow:hidden及animationend清理确保精准锚定与兼容性。
纯 CSS3 无法实现“点击哪、从哪起”的水波纹扩散特效——必须用 JavaScript 获取点击坐标并注入 CSS 变量或 style 属性，否则伪元素永远固定在中心或左上角。
为什么 button:active + transition 不行
因为 :active 是瞬时伪类，松手就失效，根本撑不起「出现→扩散→淡出」三阶段动画；transition 只能做两态变化（比如 scale(0) → scale(1)），且无法读取 e.clientX —— 浏览器不提供点击坐标的 CSS 变量。写死 left: 50%; top: 50% 就只能从中心炸开，不是真实交互反馈。
- iOS Safari 默认禁用
:active，需加touch-action: manipulation或cursor: pointer才勉强触发 - 快速连点时，多个
:active状态重叠，JS 无法清理旧动画，DOM 和渲染层都会堆积残留 - 即使强制启用，
transition也无法在:active中动态设置left/top，坐标还是写死的
必须用 ::after 伪元素 + getBoundingClientRect() 算相对坐标
按钮要设 position: relative，否则 ::after 的 absolute 定位会相对于 body 偏移；伪元素本身要设 content: ""、border-radius: 50%、z-index: -1（压在文字下方）、pointer-events: none（避免拦截后续点击）。
- 用
const rect = button.getBoundingClientRect()拿到按钮在视口中的位置 - 计算相对偏移：
const x = e.clientX - rect.left，const y = e.clientY - rect.top（移动端用e.touches[0].clientX） - 注入方式推荐
ripple.style.left = x + "px"+ripple.style.top = y + "px"+transform: translate(-50%, -50%)，别用attr()（Safari 不支持） - 每次点击前清空旧值：
button.style.removeProperty('--x')，否则新波纹从上一次位置起始
Safari 渲染异常的三个硬性修复点
iOS Safari（尤其 15.4 以下）对 ::after + scale() 有合成 bug：波纹卡顿、闪烁、甚至不触发。这不是加 -webkit- 能解决的。
- 给
::after加will-change: transform，强制开启 GPU 加速 - 圆心定位必须用
transform: translate(x, y)，别混用top/left—— Safari 对混合定位的合成逻辑不稳定 - 按钮本身有
border-radius，父级必须加overflow: hidden，否则 Safari 会裁切动画轨迹 - 动画结束必须监听
animationend事件并调用element.remove()，不能靠setTimeout，否则真机上容易残留
radial-gradient 颜色扩散的关键参数组合
颜色扩散不是靠改渐变色 stops，而是靠同时缩放圆半径和降低透明度衰减速度。典型写法是：radial-gradient(circle at Xpx Ypx, transparent 0%, #6366f1 40%, transparent 70%)。
-
Xpx Ypx必须是像素值，不能用50% 50%（那会固定在中心） - 起始色必须是
transparent，否则圆心会有一块实心点 -
40%决定高亮区大小，70%决定扩散边界，两者差值越大，“晕开”感越强 - 如果只想要单色扩散（比如蓝色变淡），用
transparent 0%, #6366f1 30%, transparent 60%更干净
真正难的不是写动画，是让每个点击都精准锚定、不偏移、不残留、不卡顿——尤其是 Safari 下，transform 定位 + will-change + overflow: hidden 这三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
