纯css仅能实现中心波纹，因:active无坐标信息；js+css可精准定位点击位置，需父容器relative定位、overflow:hidden、::after圆角绝对定位，配合transform缩放与opacity渐变动画，移动端推荐touchstart替代click并禁用tap高亮。
用 :focus-visible 和 ::after 模拟水波纹，但别直接套用伪元素动画
纯 CSS 实现水波纹点击反馈，核心不是靠 JS 控制，而是利用 :active 状态 + 伪元素的缩放与透明度变化。但直接在 :active 里写 transform: scale(2) 会卡顿、不扩散、没衰减感——因为 :active 是瞬时状态，浏览器不会自动补间“从中心向外扩散”的路径。
真正可用的方案是：给容器加 position: relative，用 ::after 创建圆形遮罩，通过 JS 在点击时动态插入带坐标的 span 或 div 元素（或复用一个固定元素），再用 CSS 动画驱动它缩放+透明度渐隐。
- 必须设置
overflow: hidden在父容器上，否则波纹会溢出 -
::after方案只适合单次点击且不需精确坐标（比如按钮全区域统一中心），但无法响应鼠标点击位置 - 如果用纯 CSS（无 JS），只能做到“中心出发”的假水波纹，
top/left写死为50%，不适合卡片、列表项等需要定位到点击点的场景
用 getBoundingClientRect() + createDocumentFragment 动态生成波纹节点
要让水波纹从真实点击坐标扩散，JS 必须获取点击位置相对于目标元素左上角的偏移，并转换为 absolute 定位值。直接 appendChild 太重，推荐用 document.createDocumentFragment() 批量管理波纹 DOM 节点，避免频繁回流。
关键步骤：
- 监听目标元素的
click事件（注意：不用mousedown，否则长按会触发多次） - 用
event.clientX - target.getBoundingClientRect().left计算--x，同理算--y - 创建
span，设置style.cssText = `--x: ${x}px; --y: ${y}px;` - 添加类名触发动画，例如
ripple，并在几秒后自动remove()
示例关键 CSS：
button.ripple-container {
position: relative;
overflow: hidden;
}
.ripple {
position: absolute;
border-radius: 50%;
background: rgba(0, 0, 0, 0.15);
transform: translate(-50%, -50);
pointer-events: none;
animation: ripple-effect 0.6s ease-out forwards;
}
@keyframes ripple-effect {
0% { width: 0; height: 0; opacity: 0.7; }
100% { width: 300px; height: 300px; opacity: 0; }
}
为什么 width/height 要设成固定值而不是 max()？
想让波纹“刚好覆盖整个按钮”，直觉会写 width: max(200%, 300px)，但 CSS 中 max() 不能用于动画属性，且 width 和 height 在 @keyframes 中无法响应父容器尺寸变化。实际更稳的做法是：在 JS 中计算最大扩散直径（例如 Math.max(w, h) * 2），然后作为内联样式写入 style。
- 硬编码
300px在小按钮上会溢出，大卡片上又显小 - 用
vw/vh单位会导致响应式错乱，尤其在缩放页面时 - 正确做法：JS 中取
const maxD = Math.hypot(w, h) * 1.4;（对角线长度 × 1.4），再设为style.width = style.height = maxD + 'px';
移动端 click 延迟导致波纹滞后？换用 touchstart 并禁用 user-select
在 iOS Safari 或某些安卓 WebView 中，click 事件有约 300ms 延迟，用户点下去后波纹晚半拍出现，体验断裂。必须改用 touchstart，同时加 preventDefault() 防止默认滚动行为干扰。
- 不要只监听
touchstart，要兼容鼠标和触控：用if ('ontouchstart' in window)判断，或统一监听pointerdown（注意 IE 不支持） - 务必加
user-select: none和-webkit-tap-highlight-color: transparent，否则 iOS 会叠加灰色高亮层，盖住波纹 - 如果用了
pointerdown，记得在 PC 上也绑定mousedown，避免遗漏
波纹动画本身时间不宜超过 0.6s，否则拖慢交互节奏；透明度从 0.25 开始比 0.15 更易感知，但别超过 0.3，否则遮挡内容太强。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
