CSS动画无法实现精准水波纹效果，因其不能响应鼠标点击的精确位置；真实水波纹需动态创建元素并基于clientX/clientY定位，配合transform过渡与transitionend移除，且必须用offsetHeight触发重排。
水波纹特效为什么不能直接用 CSS 动画模拟
CSS 动画本身无法响应鼠标点击的精确位置，而水波纹必须从点击点中心扩散。硬套 @keyframes + transform: scale() 只能固定居中，一点击就“偏了”。真实水波纹依赖 DOM 动态创建 span 或 div 元素，定位到 clientX/clientY 相对于按钮左上角的坐标，再用 CSS 过渡撑开。
- 按钮需设为
position: relative，否则子元素定位会脱出 - 计算点击坐标时要用
event.clientX - button.getBoundingClientRect().left，不是直接用event.offsetX（IE 不支持且在 transform 下不准） - 水波纹元素必须设
pointer-events: none，否则连续点击会阻塞后续事件
手写水波纹：三步插入、定位、销毁
核心逻辑就三件事：监听 click、动态生成元素、过渡结束后移除。
button.addEventListener('click', function(e) {
const ripple = document.createElement('span');
const rect = this.getBoundingClientRect();
const size = Math.max(rect.width, rect.height);
const x = e.clientX - rect.left - size / 2;
const y = e.clientY - rect.top - size / 2;
<p>ripple.style.cssText = <code> position: absolute; border-radius: 50%; margin-left: ${x}px; margin-top: ${y}px; width: ${size}px; height: ${size}px; background: rgba(0,0,0,0.15); transform: scale(0); transition: transform 0.6s ease-out; pointer-events: none; </code>;</p><p>this.appendChild(ripple);</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill5117" title="HTML Extract"><img
src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill5117" title="HTML Extract">HTML Extract</a>
<p>使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p>
</div>
<a href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p>// 触发重排，确保 transition 生效
ripple.offsetHeight;
ripple.style.transform = 'scale(1)';</p><p>ripple.addEventListener('transitionend', () => {
ripple.remove();
});
});-
ripple.offsetHeight是关键一步，强制浏览器同步计算样式，否则transform可能不触发过渡 -
size取Math.max(width, height)是为了保证圆能覆盖整个按钮，哪怕按钮是窄长矩形 - 不要用
setTimeout替代transitionend，动画时长受系统性能影响，硬编码 600ms 可能提前或滞后移除
用 clip-path 替代 DOM 插入更轻量？
Chrome 107+ 和 Firefox 111+ 支持用 clip-path: circle() + transition 实现无 DOM 操作的水波纹，但兼容性和控制力弱：
- 必须给按钮加
overflow: hidden，否则圆会溢出 -
circle()的半径单位只能是px或百分比，无法根据点击位置动态算出“刚好覆盖”的半径 - 无法实现真正的中心定位：
circle(at x y)中的x/y是相对于按钮内容盒，但点击坐标需实时转换，JS 仍需介入 - iOS Safari 对
clip-path的transition支持不稳定，常出现跳变或卡顿
所以除非项目明确限定现代浏览器且按钮尺寸固定，否则不建议用纯 CSS 方案替代 JS 插入。
多个按钮共用一套逻辑怎么避免重复绑定
别每个按钮都写一遍 addEventListener，用事件委托更干净：
document.addEventListener('click', function(e) {
const btn = e.target.closest('button[data-ripple]');
if (!btn) return;
<p>const ripple = document.createElement('span');
const rect = btn.getBoundingClientRect();
const size = Math.max(rect.width, rect.height);
const x = e.clientX - rect.left - size / 2;
const y = e.clientY - rect.top - size / 2;</p><p>ripple.style.cssText = <code>...</code>; // 同上
btn.appendChild(ripple);
ripple.offsetHeight;
ripple.style.transform = 'scale(1)';</p><p>ripple.addEventListener('transitionend', () => ripple.remove());
});- 给按钮加
data-ripple属性作为开关，方便按需启用 -
e.target.closest()能正确捕获按钮内文字、图标等子元素的点击，比直接绑在按钮上更鲁棒 - 注意：如果按钮本身有
disabled状态，得加判断if (btn.disabled) return;，否则点击禁用按钮也会触发水波纹
水波纹看着简单，真正要稳、准、快，关键是坐标计算不能错，DOM 生命周期不能漏，还有那个看似多余的 offsetHeight —— 少它一句，动画就卡住。
