CSS导航栏动画实现教程

<nav class="navbar">
  <a href="#" class="nav-link">首页</a>
  <a href="#" class="nav-link">关于</a>
  <a href="#" class="nav-link">服务</a>
  <a href="#" class="nav-link">联系</a>
</nav>

.navbar {
  display: flex;
  gap: 20px;
  padding: 15px;
  background-color: #f5f5f5;
  justify-content: center;
}
<p>.nav-link {
text-decoration: none;
color: #333;
font-size: 16px;
padding: 8px 12px;
}</p>

.nav-link {
  /* 其他样式 */
  color: #333;
  transition: color 0.3s ease, background-color 0.3s ease;
}
<p>.nav-link:hover {
color: #007bff;
background-color: #e0f0ff;
border-radius: 4px;
}</p>

.nav-link {
  position: relative;
  transition: color 0.3s ease;
}
<p>.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: #007bff;
transition: width 0.3s ease;
}</p><p>.nav-link:hover::after {
width: 100%;
}</p>

.nav-link {
  display: inline-block;
  transition: transform 0.2s ease, color 0.3s ease;
}
<p>.nav-link:hover {
color: #007bff;
transform: translateY(-2px);
}</p>