活跃下划线 Underline Active

导航菜单下方的指示线平滑滑动到当前活跃项，使用 CSS :hover 和 transition 实现。

实时预览

代码

css

.ul-nav {
  display: flex; position: relative;
  border-bottom: 2px solid rgba(255,255,255,0.1);
}
.ul-item {
  color: #aaa; text-decoration: none;
  padding: 10px 20px; position: relative;
  transition: color 0.3s;
}
.ul-item::after {
  content: ''; position: absolute;
  bottom: -2px; left: 50%; width: 0; height: 2px;
  background: #40b883; transform: translateX(-50%);
  transition: all 0.3s ease;
}
.ul-item:hover, .ul-item.active { color: #fff; }
.ul-item:hover::after, .ul-item.active::after { width: 100%; }

html

<nav class="ul-nav">
  <a href="#" class="ul-item active">首页</a>
  <a href="#" class="ul-item">产品</a>
  <a href="#" class="ul-item">关于</a>
</nav>

纯 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 降级

使用说明

属性	说明
`::after` 伪元素	作为下划线指示器
`width: 0 → 100%`	悬停时下划线从中心展开
`transform: translateX(-50%)`	保证从中心向两侧展开
`transition`	控制展开动画速度

活跃下划线 Underline Active ​

实时预览 ​

代码 ​

快速使用 ​

使用场景 ​

常见问题 ​

浏览器兼容性 ​

使用说明 ​

📎 相关动画推荐