当前位置：首页 > 文章列表 > 文章 > 前端 > CSS实现按钮点击水波效果的方法如下：HTML结构：创建一个按钮元素CSS样式：添加基础样式和水波效果.ripple-btn { position: relative; overflow: hidden; padding: 15px 30px; background-color: #4CAF50; c

CSS实现按钮点击水波效果的方法如下：HTML结构：创建一个按钮元素CSS样式：添加基础样式和水波效果.ripple-btn { position: relative; overflow: hidden; padding: 15px 30px; background-color: #4CAF50; c

2026-05-25 14:52:50 0浏览收藏

本文深入解析了如何用CSS与JavaScript协同实现真实、流畅的按钮点击水波效果，强调仅靠`:active`伪类无法达成动态扩散动画，必须通过JS精准捕获点击坐标（借助`getBoundingClientRect()`）、动态创建圆形遮罩元素（`span`），并结合`transform: scale()`或`@keyframes`动画实现以点击点为圆心的半径增长效果；同时系统性地解决了移动端触摸事件适配、多点触发防护、DOM节点及时清理、跨浏览器渲染性能优化等实战痛点，揭示了水波效果背后真正关键的不是动画本身，而是坐标精度、事件一致性与资源管理三大核心挑战。

CSS如何制作按钮被按下时的水波扩散效果

用 `:active` 无法实现真实水波效果

点击瞬间的视觉反馈必须脱离伪类依赖——:active 只能触发样式切换，不能生成动态扩散动画。水波本质是「以点击点为圆心、半径随时间增长」的圆形遮罩，需要 JS 捕获坐标 + CSS 动画配合。

核心实现：JS 创建 `span` 水波元素并定位

每次点击时，在按钮内部动态插入一个 span，设置其 left 和 top 为鼠标相对按钮左上角的偏移量，再通过 transform: scale() 或 width/height 动画让它从 0 扩散到覆盖整个按钮。

必须用 getBoundingClientRect() 计算按钮位置，再减去事件 clientX/clientY，否则水波中心会偏移
水波 span 需设 position: absolute、border-radius: 50%、pointer-events: none
动画结束要手动 remove() 元素，否则 DOM 节点持续堆积

示例关键片段：

const ripple = document.createElement('span');<br>const rect = btn.getBoundingClientRect();<br>ripple.style.left = `${e.clientX - rect.left - radius}px`;<br>ripple.style.top = `${e.clientY - rect.top - radius}px`;<br>btn.appendChild(ripple);

`transition` vs `@keyframes` 的选择

用 transition 简单但控制弱：只能定义起止状态，无法精确控制扩散节奏（比如先快后慢）；@keyframes 更灵活，适合做缓动或多次缩放（如模拟水波回弹）。

若只用 transition，需在 JS 中动态设 style.width 和 style.height，初始为 0，然后加 class 触发过渡
若用 @keyframes，推荐定义 to { transform: scale(3); opacity: 0; }，避免重排，性能更好
注意：Chrome/Safari 对 transform: scale() 的硬件加速支持稳定，但老版 Firefox 在 scale(0) 到 scale(1) 之间可能有渲染毛刺

移动端点击位置不准、多次触发问题

触摸事件的 touches[0] 坐标和鼠标事件不完全等价，且 click 在移动端有 300ms 延迟，容易导致水波滞后或重复创建。

统一监听 touchstart 和 mousedown，优先用 touchstart 的 touches[0]
添加 preventDefault() 防止部分安卓浏览器默认高亮干扰
用节流（如 setTimeout + 标志位）阻止快速连点生成多个水波层
按钮需有 cursor: pointer 和 user-select: none，避免 Safari 点击时文字选中打断动画

水波效果真正难的不是动画本身，而是坐标计算精度、多端事件对齐、以及动画结束后及时清理——这三个点漏掉任意一个，都会让效果看起来“卡”“偏”或者“越点越多”。

理论要掌握，实操不能落！以上关于《CSS实现按钮点击水波效果的方法如下：HTML结构：创建一个按钮元素CSS样式：添加基础样式和水波效果.ripple-btn { position: relative; overflow: hidden; padding: 15px 30px; background-color: #4CAF50; color: white; border: none; cursor: pointer; font-size: 16px; transition: background-color 0.3s ease; } .ripple-btn::after { content: ''; position: absolute; width: 10px; height: 10px; background: rgba(255, 255, 255, 0.5); border-radius: 50%; transform: scale(0); opacity: 0; pointer-events: none; transition: all 0.5s ease-in-out; }JavaScript控制：添加点击事件，触发水波扩散 document.querySelector('.ripple-btn').addEventListener('click', function(e) { const button = this; const rect = button.getBoundingClientRect(); // 计算点击位置相对于按钮的位置 const x = e.clientX - rect.left; const y = e》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！