水波纹在 button 上不生效是因为原生按钮缺少 overflow: hidden 和明确背景裁剪区域；需设 position: relative、overflow: hidden，并用 JS 动态计算点击坐标生成居中波纹元素，移动端应使用 pointerdown 替代 click 以避免 300ms 延迟。
水波纹效果为什么在 button 上不生效？
直接给 button 加 :active 伪类或 JS 模拟点击动画，通常看不到水波纹——因为原生按钮默认没有 overflow: hidden，且背景裁剪区域不明确。水波纹本质是「圆形渐变遮罩从点击点扩散」，必须配合相对定位容器和溢出隐藏才能裁剪动画轨迹。
- 确保按钮父容器或按钮自身设为
position: relative - 按钮必须有
overflow: hidden（否则波纹会溢出） - 避免用
border-radius: 50%的圆形按钮直接套水波纹，容易因圆角裁剪导致波纹变形；优先用矩形按钮+内嵌圆形波纹
纯 CSS 实现水波纹的最小可行代码
不用框架、不依赖 JS，靠 :focus-within 或 :active + clip-path 模拟，但兼容性有限。更稳的方式是用一个 span 元素作为波纹层，通过 JS 动态插入并定位：
<button class="ripple-btn">点击我</button>
<p><style>
.ripple-btn {
position: relative;
overflow: hidden;
border: none;
background: #007bff;
color: white;
padding: 12px 24px;
}
.ripple-btn::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255,255,255,0.5);
border-radius: 100%;
transform: translate(-50%, -50%);
transition: width 0.4s, height 0.4s, opacity 0.4s;
opacity: 0;
}
.ripple-btn:active::after {
width: 200px;
height: 200px;
opacity: 0;
}
</style>注意：::after 在 :active 状态下才展开，但无法精准定位点击坐标——这是纯 CSS 方案的根本缺陷。
JS 动态生成水波纹的关键三步
要实现「点击哪，波纹从哪中心扩散」，必须捕获 clientX/clientY 并换算为按钮内的相对坐标。核心逻辑不是“加动画”，而是“算位置 + 插元素 + 清理”：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 监听
click事件，用event.target.getBoundingClientRect()获取按钮位置 - 计算点击点相对于按钮左上角的偏移：
x = e.clientX - rect.left，y = e.clientY - rect.top - 创建
span元素，设left: x + "px"、top: y + "px"，再加transform: translate(-50%, -50%)居中 - 动画结束后用
ripple.addEventListener("transitionend", () => ripple.remove())自动清理 DOM，否则内存泄漏
移动端点击延迟与 pointerdown 替代方案
用 click 触发水波纹，在 iOS Safari 和部分安卓浏览器上有约 300ms 延迟，波纹明显滞后。应改用 pointerdown 事件，并禁用默认长按菜单：
btn.addEventListener("pointerdown", (e) => {
if (e.button !== 0) return; // 只响应主鼠标键或触摸
e.preventDefault(); // 防止 iOS 触摸高亮干扰
createRipple(e);
});同时需在 CSS 中加 * { touch-action: manipulation; }，否则某些安卓浏览器仍可能触发双击缩放或滚动。真实项目里，这点漏掉，水波纹就会在手机上“卡半拍”。
波纹直径要足够大（建议至少 200px），否则小屏设备上几乎看不见；但也不能无限制撑开，得根据按钮尺寸动态计算最大扩散半径，否则会严重溢出。
