涟漪点击按钮（Ripple Effect 水波纹 CSS + JS）

效果演示（真实可交互）

Material Design 风格的涟漪反馈：点击按钮任意位置，一个半透明圆形水波会从手指落点扩散并淡出，让每一次点击都有「被响应」的感觉。演示区 3 款分别为主色渐变、描边、深色风格，水波颜色自动适配按钮底色。

完整代码

HTML：

<button class="ripple-btn">涟漪按钮</button>

CSS（涟漪关键样式）：

.ripple-btn { position: relative; overflow: hidden; border: 0; padding: 13px 30px;
  border-radius: 12px; background: linear-gradient(135deg, #6c8cff, #b388ff);
  color: #fff; font-weight: 600; cursor: pointer; }

/* 涟漪本体：scale(0) 起飞，动画结束时 scale(1) 并透明 */
.ripple-ink {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.6);
  transform: scale(0);
  animation: ripple .6s ease-out forwards;
  pointer-events: none;   /* 不让水波拦截点击 */
}
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

JS（约 15 行，零依赖）：

document.querySelectorAll('.ripple-btn').forEach((btn) => {
  btn.addEventListener('pointerdown', (e) => {
    const rect = btn.getBoundingClientRect();
    const size = Math.max(rect.width, rect.height) * 2.2; // 水波直径
    const ink = document.createElement('span');
    ink.className = 'ripple-ink';
    ink.style.width = ink.style.height = size + 'px';
    ink.style.left = e.clientX - rect.left - size / 2 + 'px';
    ink.style.top = e.clientY - rect.top - size / 2 + 'px';
    btn.appendChild(ink);
    ink.addEventListener('animationend', () => ink.remove());
  });
});

原理三步：pointerdown 取点击坐标 → 创建圆形 span 定位到该点 → 动画结束自动移除。描边与深色变体只需改 .ripple-ink 的 background 颜色（见演示区 .rp-* 系列）。

参数说明

兼容性与性能

• 使用原生 pointerdown 事件，桌面与移动端统一，兼容所有现代浏览器
• 动画仅 transform 与 opacity，GPU 加速；每个水波动画结束后立即从 DOM 移除，不堆积节点
• 连点场景下水波最多同时存在 2-3 个，性能无忧
• 若需要更克制的反馈，可在 prefers-reduced-motion 时直接禁用水波动画

常见问题

Q: 能商用吗？ 可以。本组件为粤喵自研，免费商用无需署名。

Q: 水波颜色怎么和按钮对比更明显？ 深色或彩色按钮用 rgba(255,255,255,.5-.7) 白波；白色或浅色按钮改用 rgba(0,0,0,.15) 或主题色半透明。

Q: 水波溢出按钮外了？ 检查按钮是否有 overflow: hidden。水波是按钮的子元素，没有它就会画出边界，这是最常见的漏配。

Q: 想在卡片、列表项上也加涟漪？ 直接把 .ripple-btn 替换成任意容器选择器即可，JS 逻辑完全通用，只需保证容器 position: relative; overflow: hidden。