伪元素::after实现水波纹需同时满足position: relative、position: absolute和overflow: hidden三层约束；否则波纹会溢出、偏移或显示不全。
伪元素 ::after 必须配合 position: relative 和 overflow: hidden
水波纹要“锁在按钮内”，不能溢出或偏移，核心靠三层定位约束：button 必须设 position: relative，让伪元素能以它为参考系；::after 用 position: absolute 定位；再加 overflow: hidden 剪裁超出部分。漏掉任意一条，波纹就会飞到页面其他位置、或撑开容器、或显示不全。
常见错误现象：
- 波纹从左上角炸开 → 没设
top: 50%; left: 50%或没配transform: translate(-50%, -50%) - 波纹只在按钮右下角出现 →
getBoundingClientRect()没用上（纯 CSS 实现时必须用固定圆心，所以只能居中） - 连点多次波纹堆叠不消失 → 伪元素无法动态重置圆心，
animation结束后没自动清理，得靠opacity: 0+animation-fill-mode: forwards隐藏
@keyframes ripple 的关键帧里 transform: scale() 和 opacity 要同步控制
纯 CSS 水波纹本质是“一个圆形渐变从 0 放大到足够覆盖按钮”，不是真画波纹。所以动画必须同时操作缩放和透明度，否则会闪一下或残留残影。
实操建议：
- 起始帧设
transform: scale(0); opacity: 0.5，避免初始渲染可见 - 中间帧（如 20%）放大到
scale(25)左右，让波纹能盖住常见尺寸按钮（150px 宽需约scale(30)） - 结尾帧必须设
opacity: 0，且加animation-fill-mode: forwards，否则动画一结束就跳回不透明状态 - 别用
background-size动画 —— 它会触发重绘，卡顿明显，且圆心无法精确定位
伪元素方案只支持「中心波纹」，不支持「点击点定位」
纯 CSS 用 ::after 实现不了点击哪就在哪炸开的效果。因为伪元素没有 JS 的 clientX/clientY，无法动态算坐标。所有纯样式方案的圆心都是写死的 top: 50%; left: 50%，靠 transform: translate(-50%, -50%) 居中对齐。
这意味着：
- 适合按钮形状规则、用户预期明确的场景（如圆形按钮、卡片主操作区）
- 不适合表单项、列表项等密集交互区域 —— 用户点偏了也会看到中心炸开，体验割裂
- 如果真要点击点定位，必须用 JS 创建临时
<div class="ripple"> 并 append 到目标元素内部 <h3> <code>focus:not(:active)是触发伪元素动画的关键条件组合直接写
.ripple-button:active::after { animation: ripple 0.6s; }在某些浏览器（尤其是 Safari）里会失效 —— 因为 :active 状态太短，动画来不及启动就被清除。更可靠的做法是监听focus并排除:active，靠键盘聚焦 + 鼠标点击共同触发。典型写法：
.ripple-button:focus:not(:active)::after { animation: ripple 0.6s ease-out; }注意点：
- 按钮必须可聚焦（
tabindex或原生<button></button>） - 移动端需额外处理
touchstart，纯 CSS 无法响应 - 动画时间别超过 0.7s，否则用户会感知延迟；也别低于 0.4s，否则看起来像闪断
pointer-events: none—— 如果忘了给::after加这句，它会挡住后续点击，导致按钮失灵。 - 按钮必须可聚焦（
