Bootstrap 5 不内置水波纹效果，需借助 TW-Elements 扩展库或手写 JS+CSS 实现；TW-Elements 通过 data-twe-ripple-init 启用，支持自定义颜色但不兼容 <a> 标签；手写方案需确保 position: relative、正确计算点击坐标、监听 animationend 清理节点，并避免定位上下文与重排问题。
Bootstrap 本身（5.x）不内置水波纹效果，必须靠扩展库或手写 JS+CSS 实现；直接加 data-bs-* 或原生类名不会生效。
用 TW-Elements 快速启用 Ripple
TW-Elements 是兼容 Bootstrap 5 的增强库，Ripple 功能开箱即用，且自动初始化：
- 引入 TW-Elements CSS 和 JS（CDN 或 npm）后，只需给按钮加
data-twe-ripple-init属性 - 颜色默认为
rgba(0,0,0,0.1)，可通过data-twe-ripple-color覆盖，比如data-twe-ripple-color="rgba(59,130,246,0.3)" - 不支持在
<a>上直接使用 —— 它会忽略非button、input[type="button"]、div[role="button"]等可交互语义元素 - 若按钮已设
position: absolute或父容器未设overflow: hidden，水波纹可能溢出，需补上overflow: hidden
手写 JS+CSS 实现（无依赖）
核心是每次点击动态创建一个 <span>，定位到鼠标相对坐标，并用 transform: scale() + opacity 动画扩散：
- 目标按钮必须有
position: relative，否则left/top会以页面为基准偏移 - 计算点击坐标要用
event.clientX - rect.left和event.clientY - rect.top，不能直接用offsetX/offsetY（在 Firefox 中不可靠） - 水波纹元素样式必须含：
position: absolute; border-radius: 50%; pointer-events: none; z-index: 1 - 动画结束必须监听
animationend，而不是setTimeout；否则快速连点会导致残留节点堆积
常见错误：水波纹没从点击点中心扩散
这几乎全是坐标计算或定位上下文问题：
-
getBoundingClientRect()返回的是视口坐标，而clientX/clientY也是视口坐标 —— 相减才得相对坐标，漏减就会整体偏移 - 按钮父级有
transform（如scale(0.9)或translateZ(0)），会创建新的定位上下文，导致getBoundingClientRect()值失真；此时应把水波纹挂到该父级下，并重新计算 - 用了
%设置left/top（如left: 50%），结果永远居中，失去点击定位能力 - CSS 动画写了
width/height变化 —— 触发重排，卡顿且不准；只允许用transform和opacity
真正难的不是写动画，而是让每个水波纹都精准锚定在毫秒级的点击位置，并在并发点击时不出错。坐标计算、定位上下文、动画清理这三点，漏一个就失效。
