水波纹动画不必强制使用::after或::before，但伪元素最稳妥；需父容器relative定位、content:""、translate(-50%,-50%)居中，JS计算点击相对坐标，搭配cubic-bezier缓动与animation-fill-mode:forwards。
水波纹动画必须用 ::after 或 ::before 吗？
不是必须，但最稳妥。用伪元素能避免污染 DOM、不触发重排，且天然支持绝对定位和独立 transform。如果用真实 div，每次点击都要创建/销毁节点，容易累积内存、引发 layout thrashing。
- 伪元素必须配合
position: relative的父容器，否则absolute会相对于 body 定位 -
content: ""是硬性要求，没它伪元素不会渲染 - 不能用
display: none控制显隐——得用opacity+scale配合animation-fill-mode: forwards
如何让水波纹「精准从点击点扩散」？
靠 JS 拿到 clientX/clientY，减去父容器 getBoundingClientRect() 的偏移，算出相对坐标，再设为伪元素的 left 和 top。
- 别直接用
event.pageX—— 它受滚动影响，而伪元素定位基于 client 坐标系 - 父容器必须有明确宽高（哪怕
min-width: 0），否则getBoundingClientRect()的left/top可能不准 - 设置
transform: translate(-50%, -50%)是关键，否则圆心会偏右下角 - 示例关键 CSS：
.ripple { position: relative; } .ripple::after { content: ""; position: absolute; border-radius: 50%; background: rgba(0,0,0,0.2); transform: translate(-50%, -50%); animation: ripple 0.6s linear; }
animation 里 scale 和 opacity 怎么配才自然？
要「先快后慢」的扩散感，不能匀速。用 cubic-bezier(0.4, 0, 0.2, 1)（即 ease-in-out）比 linear 更像真实水波；同时 opacity 必须从 1 降到 0，且结束帧不能残留半透明残影。
- 别写
scale(0) → scale(10)：数值太大在小屏幕上会溢出，建议scale(0) → scale(4)足够覆盖常见按钮 - 动画时长控制在 0.5–0.7s，太短没反馈感，太长像卡顿
- 必须加
animation-fill-mode: forwards，否则动画一结束伪元素就跳回原始状态 - 关键帧示例：
@keyframes ripple { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(4); } }
移动端点击位置偏移、多次触发、动画卡顿怎么防？
核心是「节流 + 坐标校准 + 硬件加速」。移动端 touchstart 的坐标和 click 事件不同，且快速连点会导致多个伪元素堆叠。
立即学习“前端免费学习笔记（深入）”；
- 监听
touchstart而非click，取touches[0]的clientX/clientY - 用
pointer-events: none瞬间禁用伪元素，防止它拦截后续点击 - 给伪元素加
transform: translateZ(0)或will-change: transform，触发 GPU 加速 - 加个简单节流：用
setTimeout清除上一个未完成的动画，或用classList.toggle("animating")配合transitionend监听
