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 的配合使用。多试几次就能掌握。
