Bootstrap 5 默认不支持波纹效果，需通过纯 CSS（::after 伪元素+transition）或 JavaScript（touchstart/mousedown 动态创建 ripple 元素）手动实现，同时兼顾键盘可访问性（:focus-visible）与移动端兼容性。
Bootstrap 5 默认不支持波纹效果，得自己加
bootstrap 5 移除了所有 javascript 插件里的波纹（ripple）逻辑，包括 navbar-nav 中的 a 标签点击反馈。如果你看到别人导航栏有点击水波纹，那一定是手动加的 css 或 js 实现，不是 bootstrap 自带的。
原生实现波纹需要监听 mousedown 事件、动态创建 span 圆形元素、用 CSS 动画缩放并透明度渐变——但对导航链接这种高频复用组件，更推荐轻量、无依赖的方案。
用纯 CSS 实现最简波纹（兼容 Bootstrap 5 导航结构）
Bootstrap 的导航链接通常是：<a class="nav-link">首页</a>。我们利用 ::after 伪元素 + pointer-events: none 避免干扰交互，再配合 transform 和 opacity 动画模拟波纹。
.nav-link {
position: relative;
overflow: hidden;
}
.nav-link::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(0, 0, 0, 0.1);
border-radius: 100%;
transform: translate(-50%, -50%);
transition: width 0.4s, height 0.4s, opacity 0.4s;
pointer-events: none;
}
.nav-link:focus::after,
.nav-link:active::after {
width: 200px;
height: 200px;
opacity: 0;
}
- 注意必须给
.nav-link加position: relative，否则伪元素定位会错位 -
:focus::after是为了键盘用户可访问性，不能只写:active - 动画时间
0.4s和尺寸200px可按实际容器宽度调整；太小看不出效果，太大可能溢出 - 如果导航是垂直堆叠（
.flex-column），需确保父容器有overflow: hidden，否则波纹会撑开布局
JavaScript 补充方案：解决移动端 click 延迟和多点触发
CSS 方案在 iOS Safari 或部分 Android 浏览器上，:active 状态持续时间极短甚至不触发。这时得用 JS 监听 touchstart / mousedown，手动添加/移除类来控制波纹。
关键点不是写完整波纹动画逻辑，而是复用上面的 CSS 规则，只做状态切换：
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('mousedown', e => {
const ripple = document.createElement('span');
const rect = link.getBoundingClientRect();
const size = Math.max(rect.width, rect.height) * 1.5;
ripple.style.width = ripple.style.height = size + 'px';
ripple.style.left = (e.clientX - rect.left - size / 2) + 'px';
ripple.style.top = (e.clientY - rect.top - size / 2) + 'px';
ripple.classList.add('ripple');
link.appendChild(ripple);
<pre class="brush:php;toolbar:false;">// 清理
setTimeout(() => {
ripple.remove();
}, 600);}); });
- 不要直接用
e.target创建 ripple，要基于link容器计算坐标，否则嵌套文字时偏移错乱 - 移动端必须监听
touchstart，且要阻止默认行为（e.preventDefault()）防止滚动干扰 - 务必加
setTimeout清理 DOM，否则快速连点会堆积大量span元素 - 如果用了 Bootstrap 的
data-bs-toggle（如折叠菜单），JS 里要避免和原生事件冲突，建议用click替代mousedown
别忽略 focus-visible 和键盘导航支持
很多人只测鼠标点击，但波纹效果在键盘 Tab 导航时也应可见。CSS 中单靠 :focus 会污染所有焦点样式，正确做法是只对“由键盘触发的焦点”显示波纹：
.nav-link:focus-visible::after {
width: 180px;
height: 180px;
opacity: 0;
}
-
:focus-visible是现代浏览器标准，IE 不支持，但 Bootstrap 5 本就不支持 IE，可放心用 - 如果项目需兼容旧浏览器，可用
js-focus-visiblepolyfill，然后改用.focus-visible类名 - 千万别把波纹动画加到
:hover上——这会让鼠标悬停就触发，完全违背“点击反馈”的语义
波纹的本质是视觉确认，不是装饰。导航链接区域小、密度高，动画过长或尺寸过大反而干扰阅读。真正难的是让不同输入方式（鼠标、触摸、键盘）下反馈一致，而不是做出最炫的效果。
