返回

划过必看 | 打造惊艳视效，导航栏下划线跟随鼠标滑动，手把手带你玩转CSS3

前端

让导航栏焕发活力：打造跟随鼠标滑动的下划线动画

引言

作为前端开发人员，我们孜孜不倦地为网站增添导航栏，方便用户无缝浏览不同页面。然而，传统的静态下划线缺乏互动性，显得单调乏味。为了让网站更具吸引力和用户友好度，我们亟需让下划线跟随鼠标滑动，在鼠标移入时出现并滑动到当前链接的位置。这篇文章将一步步引导你使用 CSS3 动画技术，轻松掌握这项技术，为你的网站注入灵动与互动性。

准备工作

首先，我们需要创建一个基本的 HTML 结构，包含一个 nav 元素，其中包含导航链接的 a 标签。别忘了在 <head> 标签中包含 CSS 样式表。

HTML 结构：

<nav>
  <ul>
    <li><a href="#">主页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

CSS 样式：

nav {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #333;
}

nav ul {
  display: flex;
  list-style: none;
}

nav li {
  margin: 0 1rem;
}

nav a {
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
}

添加下划线动画效果

现在，重点来了！让我们为下划线注入动画效果，让它在鼠标移入时灵动滑动。我们将借助 CSS3 的 transition 和 animation 属性来实现这一效果。

nav a:hover::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #ff0000;
  transition: transform 0.3s ease-in-out;
}

nav a:hover::after {
  transform: translateX(100%);
}

这段代码为导航栏链接的 hover 状态添加了一个 ::after 伪元素。当鼠标移入链接时，这个伪元素会出现，并从左向右滑动。

优化动画效果

为了让动画效果更加流畅，我们可以使用 CSS3 的 animation-delay 属性来延缓动画的开始时间。

nav a:hover::after {
  animation: slideIn 0.3s ease-in-out forwards;
}

@keyframes slideIn {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

现在，鼠标移入链接时，下划线会从左侧滑动到链接的右侧，为你的网站增添灵动与互动性。

结语

通过这篇教程，你已经掌握了如何使用 CSS3 动画技术，为导航栏添加下划线跟随鼠标滑动效果。这项技术可以提升用户体验，让你的网站更加出彩。快去尝试一下吧，让你的网站焕发生机！

常见问题解答

1. 如何改变下划线颜色？

要改变下划线颜色，只需修改 background-color 属性的值，例如：

nav a:hover::after {
  background-color: #00ff00;
}

2. 如何更改下划线宽度？

要更改下划线宽度，只需修改 width 属性的值，例如：

nav a:hover::after {
  width: 50%;
}

3. 如何更改动画速度？

要更改动画速度，只需修改 animation-duration 属性的值，例如：

nav a:hover::after {
  animation-duration: 0.5s;
}

4. 如何让下划线在鼠标移出时隐藏？

要让下划线在鼠标移出时隐藏，只需添加以下代码：

nav a:not(:hover)::after {
  transform: translateX(-100%);
}

5. 如何让下划线保持在当前链接位置？

要让下划线保持在当前链接位置，只需使用 left 属性，例如：

nav a:hover::after {
  left: calc(50% - 50%);
}