水波纹动画不必强制使用::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，且结束帧不能残留半透明残影。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 别写 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 监听

CSS 水波纹看着简单，真正落地时最常栽在坐标计算偏差、伪元素未重置、以及移动端 touch/click 混用这三处。动效细节藏在 timing function 和 transform-origin 的配合里，不是放大就行。