用HTML代码轻松实现按钮点击水波纹漫延效果-html教程-PHP中文网

原生 button 无法直接触发 css 水波纹，因其 :active 伪类不提供点击坐标且伪元素无法动态定位；真实水波纹依赖 javascript 监听事件获取坐标、创建绝对定位的圆形涟漪元素，并需父容器 relative + overflow hidden、复用元素防堆叠、移动端用 touchstart 替代 click、适配尺寸与缓动。

用html代码轻松实现按钮点击水波纹漫延效果

为什么原生 `button` 无法直接触发 CSS 水波纹？

因为水波纹本质是「点击位置的径向渐变动画」，而原生 button 的 :active 伪类不提供坐标信息，也无法在伪元素中动态设置 left/top。你看到的“水波纹”效果，几乎全是 JavaScript 驱动的 —— 它监听 click 事件，读取 event.clientX/clientY，再动态创建一个 span 或 div 元素作为涟漪容器。

`ripple` 动画必须用 `position: absolute` 定位

水波纹要从点击点中心扩散，父容器必须设为 position: relative，否则 left 和 top 会相对于整个页面定位，导致偏移错乱。

父元素（如 button）需加 position: relative; overflow: hidden;
涟漪元素必须是绝对定位：position: absolute; border-radius: 50%;
初始尺寸建议设为 width: 0; height: 0;，靠 transform: scale(0) 更平滑（避免 layout 触发）

如何避免多次点击产生多个涟漪？

用户快速连点时，若不控制，会不断插入新 span，造成 DOM 泄漏和动画堆叠。核心解法是：复用单个涟漪元素 + 动画重置。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

每次点击先检查是否存在正在动画的 .ripple 元素，有则 remove()
创建新涟漪前，用 getComputedStyle(ripple).opacity 判断是否已结束（或更可靠：用 animationend 事件监听）
关键技巧：给涟漪加 pointer-events: none;，防止它拦截后续点击

const ripple = document.createElement('span');
ripple.className = 'ripple';
ripple.style.left = `${x - size/2}px`;
ripple.style.top = `${y - size/2}px`;
ripple.style.width = `${size}px`;
ripple.style.height = `${size}px`;
ripple.style.pointerEvents = 'none';
button.appendChild(ripple);
// 动画结束后自动移除
ripple.addEventListener('animationend', () => ripple.remove());