如何在CSS初级项目中实现导航栏下划线动画_transition和width控制

通过transition和width属性实现导航栏下划线动画，1. 用HTML构建导航结构，每个链接内含span作为下划线；2. CSS中设置underline初始width为0，添加transition过渡效果；3. hover时width设为100%，触发动画展开；4. 可选居中展开通过left:50%和translateX(-50%)实现，优化视觉效果。

在CSS初级项目中实现导航栏下划线动画，可以通过 transition 和 width 属性来控制鼠标悬停时的下划线展开效果。这种动画简洁美观，适合用在网页顶部导航菜单中，提升用户体验。

1. 基础结构：HTML 导航栏布局

先构建一个简单的水平导航菜单，每个菜单项包含文字和用于下划线的容器（可以是 span 或伪元素）：

2. 样式设置：隐藏下划线并定义过渡

使用CSS设置初始状态，让下划线默认宽度为0，并添加 transition 实现平滑动画：

.navbar {
  display: flex;
  gap: 40px;
  padding: 20px;
  justify-content: center;
}
.nav-link {
text-decoration: none;
color: #333;
position: relative;
font-size: 16px;
}
.underline {
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background-color: #007acc;
transition: width 0.3s ease;
}

3. 悬停效果：控制 width 展开

当鼠标悬停在链接上时，将下划线的 width 设置为100%，触发 transition 动画：

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

这样当下划线从 0 扩展到 100% 时，就会有平滑的横向展开动画。

4. 可选优化：居中对齐或反向收缩

如果希望下划线从中部向两边展开，可以调整伪元素的定位方式：

.underline {
  left: 50%;
  transform: translateX(-50%);
  /* 其他样式不变 */
}
.nav-link:hover .underline {
width: 100%;
}

这样下划线会从中心向左右同时扩展，视觉效果更柔和。

基本上就这些。通过控制 width 配合 transition，就能轻松实现导航栏下划线动画。不复杂但容易忽略细节，比如定位方式和过渡时间的选择。多尝试不同的 easing 函数如 ease-in-out，可以让动画更有质感。