答案：通过CSS transition和:hover实现导航条滑动效果，首先构建HTML导航结构，使用Flex布局排列导航项，再利用伪元素::after创建底部下划线滑入效果，或通过background-position与渐变背景实现背景色滑动填充，结合过渡时间和缓动函数使动画流畅自然。
要实现导航条的滑动效果，可以通过 CSS 的 transition 属性结合 :hover 或 JavaScript 控制元素状态来完成。核心思路是监听用户交互（如悬停或点击），然后平滑地改变导航项的位置或尺寸。
1. 基础结构：HTML 导航结构
先构建一个简单的水平导航条：
<nav class="navbar">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
2. 设置基础样式
使用 Flex 布局让导航项水平排列，并设置相对定位以便后续动画操作：
.navbar ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
background: #f4f4f4;
}
.navbar li a {
display: block;
padding: 15px 20px;
text-decoration: none;
color: #333;
position: relative;
transition: color 0.3s ease;
}
3. 添加底部滑动下划线效果
常见做法是为每个链接添加一个滑动的下划线。利用伪元素和 transform 实现平滑过渡：
立即学习“前端免费学习笔记（深入）”；
.navbar li a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: #007acc;
transition: width 0.3s ease;
}
.navbar li a:hover::after {
width: 100%;
}
当鼠标悬停时，::after 伪元素的宽度从 0 扩展到 100%，形成滑入的视觉效果。
4. 滑动背景色效果（可选进阶）
也可以让整个链接背景滑动填充。通过设置背景渐变并配合 background-size 控制初始大小：
.navbar li a {
background-image: linear-gradient(to right, #007acc 50%, transparent 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background-position 0.3s ease;
}
.navbar li a:hover {
background-position: left bottom;
color: #fff;
}
这样背景颜色会从右向左“滑入”，产生更动态的效果。
基本上就这些。只要合理使用 transition 和状态变化（如 :hover），就能轻松做出流畅的导航滑动动画。关键是控制好过渡属性、时间和缓动函数，让体验自然不突兀。
