bootstrap 5 原生不支持按钮点击扩散动画，需用 css（::after + scale + transition）或 js（动态定位 ripple）实现；css 方案须设 position: relative、避免 all 过渡、兼容 ios；js 方案需监听 mousedown/touchstart、计算坐标、节流并清理 dom。
Bootstrap 5 按钮点击时没有默认扩散动画
Bootstrap 5 默认移除了所有 :focus 和 :active 状态下的 CSS 动画（包括 Ripple 效果），也不再内置类似 Material Design 的点击波纹（ripple）逻辑。如果你看到“点击扩散效果”，那一定是自己加的，或者用了第三方插件——原生 Bootstrap 5 不提供这个功能。
用纯 CSS 实现按钮点击扩散动画（无 JS）
核心思路是利用 ::after 伪元素 + transform: scale() + transition，配合 :active 触发。注意：必须给按钮设 position: relative，否则伪元素定位会出错。
常见错误现象：::after 完全不显示、扩散中心偏移、点击后残留白圈、在 iOS Safari 上失效。
- 确保按钮有
position: relative（否则::after会相对于 body 定位） - 伪元素宽高设为
200%，top/left: -50%，才能以按钮中心为原点缩放 - 过渡属性只写
transform，别用all，否则可能触发重排或干扰其他样式 - iOS Safari 需要添加
-webkit-tap-highlight-color: transparent防止点击高亮覆盖动画
.btn-ripple {
position: relative;
overflow: hidden;
}
.btn-ripple::after {
content: '';
position: absolute;
width: 200%;
height: 200%;
background: rgba(255,255,255,0.3);
top: -50%;
left: -50%;
border-radius: 100%;
transform: scale(0);
transition: transform 0.4s ease-out;
}
.btn-ripple:active::after {
transform: scale(1);
}
@media (pointer: coarse) {
.btn-ripple {
-webkit-tap-highlight-color: transparent;
}
}
用 JavaScript 补全真实点击位置（带坐标定位）
CSS 方案只能做中心扩散；如果要实现「从手指/鼠标点击处开始扩散」，必须用 JS 记录 clientX/clientY，动态创建 span 元素并定位。这是真正接近 Material Ripple 的做法。
使用场景：对交互精度要求高的管理后台、设计工具类应用；移动端尤其明显。
- 监听
mousedown（桌面）和touchstart（移动），避免用click（有 300ms 延迟） - 计算点击点相对于按钮左上角的偏移：
e.clientX - btn.getBoundingClientRect().left - 动态插入的
<span></span>必须设position: absolute、pointer-events: none - 动画结束后记得
remove()，否则 DOM 节点持续堆积 - 别忘了节流：同一按钮连续点击时，避免多个 ripple 同时存在
性能影响：每个 ripple 是一个新 DOM 节点，高频点击下需控制生命周期；现代浏览器中 60fps 可维持，但低端 Android 设备可能掉帧。
为什么不要直接套用 Bootstrap 4 的 ripple 插件
很多教程推荐复用 Bootstrap 4 的 bootstrap-ripple.js 或 jQuery 版本，但在 Bootstrap 5 下大概率失效——不是因为代码写得差，而是因为 DOM 结构和事件机制变了。
典型兼容性问题：
- Bootstrap 5 移除了 jQuery 依赖，所有
$()调用直接报ReferenceError: $ is not defined - 按钮 class 名虽未变，但内部
data-bs-*属性和初始化逻辑不同，插件 hook 失效 - 部分老插件用
offsetWidth获取尺寸，在display: none或visibility: hidden容器里返回 0，导致扩散起点错乱
真正省事的做法是：用上面的 CSS 方案起步，真需要精准定位再上轻量 JS 实现——别为一个动效引入几百行不可控的第三方代码。
最易被忽略的一点：扩散动画的透明度和颜色要跟按钮背景协调；白色 ripple 在浅灰按钮上几乎看不见，而深色 ripple 在 .btn-dark 上又太突兀。调色比写逻辑花的时间还多。
