要让涟漪从按钮中心扩散，需用 clip-path 配合 transform-origin：将涟漪设为按钮子元素，absolute 定位 + inset: 0，transform: scale(0) 且 transform-origin: center；避免伪元素偏移、overflow 裁切、z-index 缺失等问题。
点击触发时如何让涟漪从按钮中心扩散？
关键在 clip-path 配合 transform-origin，而不是用伪元素画圆再放大——后者难以精准对齐按钮中心，尤其在响应式布局中偏移明显。必须把涟漪容器设为按钮的子元素，并显式设置 position: absolute 和 inset: 0，再通过 transform: scale(0) 初始态 + transform-origin: center 确保缩放锚点落在正中。
常见错误是直接给按钮加 ::after 并设 top: 50%; left: 50%，但没重置 transform: translate(-50%, -50%)，导致点击位置偏移；更隐蔽的问题是父容器有 overflow: hidden 却没给涟漪容器加 z-index，动画中途被裁切。
- 涟漪元素需设
pointer-events: none，避免遮挡后续点击 - 用
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1)模拟真实水波减速感，比ease-out更自然 - 动画时长控制在
350ms内，超过 400ms 人眼会感知卡顿
CSS 动画如何与 JavaScript 点击事件同步启动？
不能靠 :active 伪类——它只在鼠标按下瞬间生效，松开就消失，撑不起完整涟漪周期。必须用 JS 在 click 事件里动态添加 class 触发动画，且要确保每次点击都新建一个涟漪元素，否则多个点击会复用同一个 DOM 节点，导致位置错乱或动画叠加。
示例逻辑：监听导航按钮的 click，获取 getBoundingClientRect() 计算点击坐标相对于按钮左上角的偏移，再设置涟漪元素的 left 和 top 为该偏移值（单位 px），最后添加 ripple-active class 启动动画。
- 若用
event.clientX / clientY计算位置，必须减去按钮getBoundingClientRect().left/top，否则在滚动页面时坐标错乱 - 动画结束后需用
animationend事件清理 DOM，否则内存泄漏（尤其移动端频繁点击） - 移动端要同时监听
touchstart，且阻止默认行为event.preventDefault()防止双击缩放干扰
全屏菜单展开时如何让涟漪效果不被遮挡或拉伸？
全屏菜单通常用 position: fixed; inset: 0 实现，此时涟漪若放在菜单内部，会被菜单自身的 transform: scale() 或 opacity 过渡影响——比如菜单淡入时，涟漪也跟着变透明，失去冲击力。正确做法是把涟漪元素挂载到按钮的 DOM 位置（即仍在导航栏内），并用 z-index 设为高于菜单层但低于其他交互控件（如关闭按钮）。
另一个坑是全屏菜单常配合 body { overflow: hidden }，这会导致涟漪动画过程中因视口尺寸突变而抖动。解决方案是：菜单打开前先记录 document.body.style.paddingRight（用于补偿滚动条消失的宽度），再临时加 padding-right，避免重排。
- 涟漪元素的
width和height必须设为足够覆盖全屏对角线的距离，例如calc(100vw * 1.414)，否则大屏下边缘无法触达 - 不要用
max-width: 100%约束涟漪，它会截断动画终点 - 若菜单有背景模糊（
backdrop-filter），涟漪需设backdrop-filter: none，否则出现双重模糊拖影
如何兼容 Safari 15.4 以下版本的 clip-path 圆形动画？
Safari 15.4 之前不支持 clip-path: circle() 的 CSS 动画，直接写 circle(0 at center) → circle(100% at center) 会失效。降级方案是改用 transform: scale() + overflow: hidden 模拟：父容器设 border-radius: 50% 和 overflow: hidden，子元素从 scale(0) 动画到 scale(2)（确保完全覆盖）。
检测方式很简单：运行 CSS.supports('clip-path', 'circle(1px)')，返回 false 就走降级路径。注意这个检测必须在 DOM 加载后执行，不能放在 :root 变量里。
- 降级方案中，父容器必须设固定宽高（如
width: 100px; height: 100px），否则border-radius: 50%在不同尺寸下表现不一致 - Scale 动画要搭配
transform-origin: center，否则缩放中心偏移 - 别忘了给降级容器加
will-change: transform，避免 Safari 旧版重绘卡顿
实际最难处理的是多层堆叠下的 z-index 层级和动画时序耦合——比如菜单展开动画 300ms，涟漪 350ms，关闭时又得反向协调，稍有不慎就出现“涟漪刚散开菜单就消失了”的割裂感。这些细节没法靠一套通用 class 解决，得按具体 DOM 结构微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
