如何用css实现导航栏下划线过渡-css教程-PHP中文网

如何用css实现导航栏下划线过渡

P粉602998670

发布： 2025-10-27 18:37:01

原创

699人浏览过

答案是利用伪元素和CSS的transform与transition实现导航栏下划线过渡。首先构建导航HTML结构，设置flex布局与链接样式，再通过::after创建绝对定位的下划线，初始宽度为0，配合transition定义动画时长与函数，hover时宽度变为100%或使用scaleX从中心展开，实现平滑过渡效果。

如何用css实现导航栏下划线过渡

实现导航栏下划线过渡效果，关键在于利用伪元素和CSS的transform与transition属性。这种方式既美观又性能良好。

1. 基本HTML结构

先构建一个简单的导航结构：

<nav class="navbar">
  <a href="#" class="nav-link">首页</a>
  <a href="#" class="nav-link">关于</a>
  <a href="#" class="nav-link">服务</a>
  <a href="#" class="nav-link">联系</a>
</nav>

登录后复制

2. 设置基础样式

给导航链接设置基本样式，隐藏默认下划线，定位伪元素：

.navbar {
  display: flex;
  gap: 30px;
  padding: 20px;
  background: #fff;
}

.nav-link {
  text-decoration: none;
  color: #333;
  position: relative;
  padding: 10px 0;
}

登录后复制

3. 添加下划线伪元素

使用::after创建下划线，并设置过渡动画：

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

查看详情

立即学习“前端免费学习笔记（深入）”；

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #007bff;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

登录后复制

4. 可选：更平滑的居中展开效果

如果想让下划线从中间向两边展开，可以调整伪元素的起点和变换原点：

.nav-link::after {
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.nav-link:hover::after {
  transform: translateX(-50%) scaleX(1);
}

登录后复制

这种方法使用scaleX控制宽度变化，视觉上更流畅，且避免重绘。

基本上就这些，核心是伪元素 + 过渡控制。不复杂但容易忽略细节。

以上就是如何用css实现导航栏下划线过渡的详细内容，更多请关注php中文网其它相关文章！