如何用css实现导航栏下划线动画_技术学堂

如何用css实现导航栏下划线动画

发布时间：2025-10-26 11:20

发布者：网络

浏览次数：

答案：通过CSS伪元素::after结合transform和transition实现导航栏下划线动画，1. 使用flex布局构建横向导航；2. 设置a标签相对定位；3. 利用::after创建初始宽度为0的下划线；4. hover时宽度变为100%，配合transition实现滑动效果；5. 通过left和transform控制展开方向，如居中展开需设置left:50%和translateX(-50%)。

如何用css实现导航栏下划线动画

实现导航栏下划线动画，可以通过 CSS 的伪元素（如 ::after 或 ::before）结合 transform 和 transition 来完成。点击或悬停时，下划线从一侧滑动出现，视觉效果流畅自然。

1. 基本 HTML 结构

假设导航栏由一个无序列表构成：

<n*>
  <ul class="n*-list">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</n*>

2. 基础样式设置

先给导航基本样式，隐藏默认列表符号，横向排列：

.n*-list {
  list-style: none;
  display: flex;
  gap: 40px;
  padding: 20px;
  background: #f8f8f8;
}

.n*-list a {
  text-decoration: none;
  color: #333;
  font-size: 16px;
  position: relative;
  padding: 10px 0;
}

3. 添加下划线动画效果

使用 ::after 伪元素创建下划线，初始状态隐藏，悬停时滑出：

.n*-list a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 0;
  height: 2px;
  background-color: #007acc;
  transition: width 0.3s ease, left 0.3s ease;
}

.n*-list a:hover::after {
  width: 100%;
}

这样，鼠标移到链接上时，下划线会从左向右伸展。

Mureka

Mureka是昆仑万维最新推出的一款AI音乐创作工具，输入歌词即可生成完整专属歌曲。

1091 查看详情 Mureka

4. 进阶：居中向两边展开

如果想让下划线从中部向左右两侧展开，调整伪元素的起点和 transform：

.n*-list a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 0;
  height: 2px;
  background-color: #007acc;
  transition: width 0.3s ease, left 0.3s ease;
  transform: translateX(-50%);
}

.n*-list a:hover::after {
  width: 100%;
  left: 0;
}

利用 transform: translateX(-50%) 将下划线中心对齐，悬停时宽度撑满，视觉上就是从中向两边展开。

基本上就这些。通过控制伪元素的宽、位置和过渡效果，就能做出各种风格的下划线动画，不复杂但容易忽略细节。比如确保父元素是相对定位，伪元素才能准确定位。

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

# css # 导航栏下划线 # html # 伪元素 # flex布局 # 排列 # a标签 # 相对定位 # 下划线 # 如何用 # 中不 # 进阶 # 两种类型 # 选择器 # 鼠标 # 就能 # 相关文章 # 可以通过 # 快捷的抖音营销推广方法 # 快速推广本地营销计划 # 网站投放推广方案怎么写 # 淘宝单品关键词排名 # 绿茶营销推广方案设计图 # 网络推广营销新模式 # 品牌营销推广系统招商 # 江门租房网站建设 # 律师推广网站怎么做最好 # seo粤语读西还是hi