Appearance
胶囊导航
胶囊滑动指示器
实时预览
Home
About
Contact
代码
css
.pill-nav{display:flex;gap:4px;background:#1a1a2e;padding:4px;border-radius:8px}
.pill-nav-item{padding:8px 16px;color:#888;border-radius:6px;font-size:13px;cursor:pointer;transition:all .3s}
.pill-nav-item.active{color:#fff;background:#667eea}纯 CSS 实现的胶囊导航导航动画——通过过渡和变换让导航菜单的交互更有质感。适用于响应式导航、单页应用路由指示、粘性收缩等场景。
快速使用
- 复制 CSS 代码到你的样式文件中
- 将导航 HTML 结构粘贴到页面中（注意
.active类标记当前页面） - 修改导航项的数量和文字内容
- 调整颜色以匹配你的导航栏设计
使用场景
- 响应式导航：移动端汉堡菜单展开/收起动画适配小屏幕
- 单页应用导航：活跃下划线指示器平滑滑动到当前页面
- 大型导航菜单：下拉菜单的展开动画配合内容区的滑入
- 粘性导航栏：滚动时导航栏收缩+背景半透明节省屏幕空间
常见问题
Q: 导航动画如何适配移动端？ A: 移动端导航建议以下策略：折叠为汉堡菜单（320-768px），用 CSS transition 实现滑入/展开；触摸目标至少 44x44px；下拉菜单在移动端改为手风琴展开模式。
Q: 下划线指示器如何实现平滑跟随？ A: 纯 CSS 方案用 :hover::after + transition 展开下划线。如果要精确跟随鼠标位置（磁吸效果），需要 JS 计算 getBoundingClientRect() 动态设置指示器的 left 和 width。
Q: 粘性导航的性能如何优化？ A: 使用 position: sticky 而非 JS scroll 监听，避免主线程频繁计算。导航栏本身用 will-change: transform 提升合成层，内容区预留 scroll-margin-top 避免锚点跳转被导航遮挡。
浏览器兼容性
| 浏览器 | 兼容性 |
|---|---|
| Chrome / Edge | ✅ 完全支持 |
| Firefox | ✅ 完全支持（position: sticky 需注意） |
| Safari | ✅ 完全支持 |
| 移动端浏览器 | ✅ 完全支持 |
| IE 11 | ❌ position: sticky 不支持，需 JS 降级 |