Bootstrap 5 默认不支持水波纹特效，需手动实现：通过 JS 获取点击坐标并添加带定位的 .ripple-active 类，结合 ::after 伪元素、transform: scale() 和 opacity 实现扩散动画，注意兼容圆形按钮、防重叠、性能优化及移动端适配。
水波纹特效在 Bootstrap 5 中默认不可用
Bootstrap 5 移除了所有 JavaScript 插件的依赖（包括旧版的 ripple），也不再内置水波纹（Ripple）CSS 动画。你看到的按钮点击反馈，仅靠 :active 伪类实现——它没有扩散动画、不记录点击坐标、无法适配圆形按钮，本质是“假水波纹”。真水波纹必须手动实现。
用 ::after 伪元素 + transform 实现可定位水波纹
核心思路：监听 click 事件，动态创建一个圆形 ::after 元素（实际是用 JS 添加带坐标的 class），通过 transform: scale() 和 opacity 控制扩散与淡出。不能只靠纯 CSS，因为点击坐标必须由 JS 获取。
实操建议：
- 给按钮添加
position: relative，确保伪元素能精确定位 - 用
getBoundingClientRect()计算点击点相对于按钮左上角的偏移，转为left/top - 水波纹直径建议设为
max(width, height) * 2，避免边缘被截断 - 动画时长控制在
0.4s ~ 0.6s，过长显得迟滞，过短难察觉 - 务必加
pointer-events: none到水波纹元素，否则会干扰后续点击
示例关键 CSS：
立即学习“前端免费学习笔记（深入）”；
.btn-ripple::after {
content: '';
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: scale(0);
pointer-events: none;
transition: transform 0.5s, opacity 0.5s;
}
<p>.btn-ripple.ripple-active::after {
transform: scale(1);
opacity: 0;
}兼容圆形按钮和不同尺寸按钮要重算 left/top
方形按钮可直接用 clientX - rect.left，但圆形按钮（如 btn-circle 或 rounded-circle）需额外约束：水波纹中心必须落在圆内，否则动画起点会偏到按钮外。这时不能简单用原始坐标，得做边界校验。
常见错误现象：
- 点击按钮右下角，水波纹从左上角炸开 → 未用
rect.left/rect.top做相对换算 - 水波纹一半消失在按钮外 → 未将
left/top限制在0 ~ width/height范围内 - 多个连续点击出现多个水波纹 → 没在新动画开始前清除旧的
.ripple-active类
修复要点：
- 计算
left = Math.max(0, Math.min(x - rect.left, rect.width - diameter)) - 同理处理
top - 每次
click前先element.classList.remove('ripple-active')
性能与移动端适配要注意 touchstart 和图层合成
只监听 click 在移动设备上有明显延迟（约 300ms），应改用 touchstart；但需同时兼容鼠标和触摸，推荐用 addEventListener('pointerdown', ...)（Bootstrap 5 已默认支持）。
另外，水波纹动画若触发重排（layout），滚动或快速连点时易卡顿。优化手段：
- 给水波纹元素加
will-change: transform（仅首次动画前设置，避免常驻消耗） - 使用
transform和opacity（两者都走 GPU 合成） - 避免在
::after中设置width/height动画，改用transform: scale() - 移动端需加
user-select: none防止长按触发文字选择干扰
容易被忽略的一点：如果按钮本身有 overflow: hidden（比如某些卡片内的按钮），水波纹会被裁剪。此时要么去掉 overflow，要么把水波纹容器上提一层（例如挂到 body 下并绝对定位），但后者需手动管理 zIndex 和清理 DOM。
