CSS初级项目如何实现导航栏下划线动画_hover与transition结合

答案：通过CSS的:hover和::after实现导航栏下划线动画。1. 用ul+li搭建导航结构；2. 设置flex布局并移除默认样式；3. 利用::after创建下划线，transition定义宽度变化；4. hover时宽度从0到100%展开，可调整left和transform实现中点向两边展开效果。

要实现一个带有下划线动画效果的导航栏，可以使用 :hover 伪类配合 transition 属性，让鼠标悬停时下划线平滑地出现或移动。这种效果简洁美观，适合初级CSS项目。

1. 基本HTML结构

先搭建一个简单的导航结构，通常使用 ul 和 li 包裹链接：

2. 基础CSS样式

设置导航的基本样式，隐藏默认列表符号，横向排列，并移除链接的默认下划线：

.navbar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 30px;
}

.navbar a {
  text-decoration: none;
  color: #333;
  font-size: 18px;
  position: relative;
  padding-bottom: 5px;
}

3. 添加下划线并设置过渡动画

使用 ::after 伪元素创建下划线，并通过 transform 和 transition 实现动画效果：

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

.navbar a:hover::after {
  width: 100%;
}

说明：
- ::after 创建一条隐藏的下划线（初始宽度为0）
- transition: width 0.3s ease 让宽度变化有缓动动画
- hover 时将宽度设为100%，实现从左到右的展开效果

4. 可选增强效果

如果想让下划线从中间向两边展开，可以这样改：

.navbar a::after {
  width: 0;
  left: 50%;
  transform: translateX(-50%);
}

.navbar a:hover::after {
  width: 100%;
}

这样下划线会从中点向左右同时延伸，视觉更柔和。

基本上就这些。用 hover 控制伪元素的显示状态，加上 transition 定义过渡，就能做出流畅的下划线动画。不复杂但容易忽略细节，比如 position 和 transform 的配合使用。多试几次就能掌握。