按钮波纹效果不能仅用:active实现，因其无位置感知能力，需JavaScript记录点击坐标、动态创建绝对定位的::after伪元素，经坐标转换、对角线尺寸计算、动画参数优化及requestAnimationFrame兜底，才能实现真实物理感反馈。
按钮波纹效果为什么不能只靠 :active
因为 :active 只能触发样式切换，无法实现从点击点向外扩散的圆形动画——它没有位置感知能力，也不能控制动画起始半径和透明度渐变。真要“从指尖炸开一圈光”，得用 JavaScript 记录点击坐标，再动态创建一个 ::after 伪元素并定位、缩放、淡出。
用 getBoundingClientRect() 算点击相对位置
必须把鼠标坐标转成相对于按钮左上角的偏移值，否则波纹会从视口原点开始跑。关键不是“获取坐标”，而是“减去按钮自身 left 和 top”。
-
event.clientX和event.clientY是视口坐标，得减去button.getBoundingClientRect().left/top - 波纹直径至少要覆盖按钮对角线长度，不然在角落点击时会“切掉一半”
- 建议用
Math.hypot(width, height)算对角线，比手写Math.sqrt(w*w + h*h)更直观
::after 波纹层必须设为 position: absolute 且父容器 position: relative
否则波纹会脱离按钮范围，飞到文档流顶部或错位。很多人漏了给按钮加 position: relative，结果波纹飘在页面别处，还以为 JS 坐标算错了。
- 伪元素需设
content: ""、border-radius: 50%、pointer-events: none -
transform: translate(-50%, -50%)是让圆心精准落在点击点的核心操作 - 动画结束必须手动
remove()波纹元素，否则大量点击后 DOM 节点堆积，影响性能
动画参数调不好，波纹就“假”
真实点击反馈有物理感：快起、慢收、边缘略虚。CSS 动画时间太长像卡顿，太短像没反应；透明度曲线不缓动，就像硬切。
- 推荐动画时长：
350ms（快于 300ms 不易感知，慢于 400ms 显迟滞） - 关键帧用
ease-out或cubic-bezier(0.2, 0.8, 0.3, 1)，避免线性过渡 - 初始
opacity: 0.6，结尾opacity: 0，别用opacity: 0.1——人眼对低透明度变化不敏感 - 别忘了加
will-change: transform, opacity，尤其在移动端，防掉帧
最常被忽略的是：波纹元素插入后要等一帧再触发动画（requestAnimationFrame），否则 CSS 引擎可能跳过首帧渲染，导致“点了没反应”。这事没法靠 CSS 解决，JS 层得兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
