答案是通过设置transition和hover实现导航栏颜色渐变。首先构建HTML导航结构，然后为.nav-link添加transition: background-color 0.3s ease，再定义:hover状态的背景色变化，即可实现平滑过渡效果。
在CSS中实现导航栏颜色渐变过渡，关键在于结合 background-color 的 hover 状态与 transition 属性。通过设置平滑的过渡效果，可以让导航项在鼠标悬停时自然地改变背景色，提升用户体验。
1. 基础结构：HTML 导航栏
先构建一个简单的水平导航栏结构：
2. 设置默认样式
为导航链接设置基本样式，包括布局、颜色和去除默认下划线：
.navbar {
display: flex;
gap: 10px;
padding: 10px;
background: #f4f4f4;
}
.nav-link {
text-decoration: none;
padding: 10px 15px;
color: #333;
background-color: #e0e0e0;
border-radius: 4px;
}
3. 添加 transition 实现平滑过渡
在 .nav-link 上添加 transition 属性，控制背景色变化的速度和缓动效果：
立即学习“前端免费学习笔记（深入）”；
.nav-link {
/* 其他样式 */
transition: background-color 0.3s ease;
}
这里设置 0.3秒 的过渡时间，使用 ease 缓动函数，使颜色变化更自然。
4. 定义 hover 状态的颜色变化
当鼠标悬停时，更改背景色，transition 会自动应用：
.nav-link:hover {
background-color: #007bff;
color: white;
}
悬停时背景变为蓝色，文字变白，由于 transition 的存在，颜色会平滑渐变而非瞬间切换。
5. 可选：增强视觉反馈
可加入轻微位移或阴影提升交互感：
.nav-link {
transition: all 0.3s ease;
}
.nav-link:hover {
background-color: #007bff;
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
基本上就这些。只要正确设置 transition 和 hover 中的 background-color，就能实现流畅的颜色渐变过渡效果。注意确保 transition 写在正常状态中，否则不会生效。不复杂但容易忽略细节。
