Bootstrap 按钮无原生波纹动画，需手动实现：纯 CSS（伪元素+定位裁剪）或 JS（动态创建+坐标计算），并注意 disabled/加载/键盘操作等状态兼容。
Bootstrap 按钮没有原生波纹动画，别白找 .ripple 类
bootstrap 5 官方 css 和 js 组件里压根不提供点击波纹（ripple）效果——它连 :active 状态的视觉反馈都极简，更别说扩散动画了。你看到的“带波纹的 bootstrap 按钮”，全是项目里自己加的，或是用了第三方插件（比如 mdb、bootswatch 主题），不是 bootstrap 自带能力。
常见错误现象：
• 在按钮上加 class="btn btn-primary ripple"，但完全没反应
• 查 Bootstrap 官方文档搜 “ripple” 或 “wave”，结果为 0
• 以为只要引入 Bootstrap JS 就能自动激活波纹——其实 JS 根本不处理这个
- Bootstrap 的交互反馈只靠
:hover、:focus、:active做基础状态切换，不封装动画逻辑 - 所有波纹动效必须手动实现：纯 CSS（伪元素）或 JS 动态创建
- 如果你用的是 Bootstrap 4/5，默认样式表里没有任何
@keyframes ripple或::after波纹规则
用纯 CSS 实现时，overflow: hidden 和 position: relative 缺一不可
想让波纹看起来“从按钮中心炸开又消失”，核心是伪元素 + 定位裁剪。但漏掉任一条件，波纹就会跑出按钮、变形、或根本不动。
-
overflow: hidden必须加在按钮自身上——不是父容器，也不是 body；否则波纹放大后直接溢出 -
position: relative也必须加在按钮上，否则::after的top: 50%; left: 50%会相对于最近的定位祖先计算，位置偏移 - 别给
::after设width/height做缩放：会触发重排，卡顿；改用transform: scale()+opacity，走 GPU 加速 -
pointer-events: none得加在伪元素上，否则快速连点时可能拦截下一次点击
示例关键样式：
.btn-ripple {
position: relative;
overflow: hidden;
}
.btn-ripple::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 0; height: 0;
border-radius: 50%;
background: rgba(255,255,255,0.5);
transform: translate(-50%, -50%) scale(0);
opacity: 0;
pointer-events: none;
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s;
}
.btn-ripple:active::after {
transform: translate(-50%, -50%) scale(3);
opacity: 1;
}
要精准响应点击位置？必须用 JavaScript 动态创建波纹元素
纯 CSS 的 :active + ::after 只能从中心扩散，无法做到“在哪点就在哪炸”。比如卡片式按钮、大尺寸按钮、或需要强调操作焦点的场景，就得 JS 出手。
- 监听
click事件，用e.clientX和getBoundingClientRect()算出点击点相对按钮左上角的x/y - 动态创建
<span></span>元素，设position: absolute、border-radius: 50%、pointer-events: none - 把
left和top设为计算出的坐标，再加transform: translate(-50%, -50%)居中圆心 - 插入按钮内部后，600ms 内自动移除，避免 DOM 泄漏
注意：移动端需额外监听 touchstart，且 touch-action: manipulation 要加在按钮上，否则 iOS Safari 可能跳过 :active 或延迟响应
和 Bootstrap 其他状态（禁用、加载）共存时，最容易忽略三件事
一旦按钮进入 disabled 或加载中状态，波纹必须同步失效，否则用户会困惑：“点了怎么还有波纹？但按钮明明不能点”。
- 禁用时，
button.disabled = true后，JS 创建的波纹节点得立刻remove()；CSS 方案则要确保:disabled::after被显式设为display: none或opacity: 0 - 加载态（如加
.btn-loading）时，波纹动画必须停掉——否则 spinner 和波纹同时动，视觉打架 - 键盘操作（Enter/Space 触发）也要支持波纹：不能只绑
click，得同时监听keydown并过滤Enter和Space
最常被忽略的点：波纹动画时间（比如 300ms）比请求响应还长。用户点完就切走了，波纹还在慢放——这不是反馈，是干扰。该停就停，别硬播完。
