网站的导航栏设计了一个动画效果-鼠标悬停动画

介绍：

我为一个网站的导航栏设计了一个动画效果，在鼠标悬停在导航链接上时，链接的底部会出现一个特殊的下划线，而这个下划线会根据鼠标移动的位置而缓慢移动，最终停留在当前链接下方。这个效果不仅让导航栏看起来更加生动和有趣，还可以提高用户的交互体验和可用性，让用户更加容易找到所需的信息。

具体步骤

实现这个效果的方法是使用 CSS 的 :hover 伪类和 transition 属性。首先，我使用 :hover 选择器来指定链接在鼠标悬停时的样式，包括底部下划线的高度、颜色和位置。然后，使用 transition 属性来指定底部下划线从当前位置平滑移动到新位置的过渡效果。最后，使用 transform 属性和 translateX() 函数来根据鼠标移动的位置动态调整底部下划线的位置。

具体代码

<nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">关于我们</a></li>
      </ul>
    </nav>

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  width: 600px;
  margin: 0 auto;
  padding: 0;
}

nav li {
  position: relative;
}

nav a {
  display: block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
  font-weight: bold;
}

nav a::after {
  content: "";
  position: absolute;
  left: 0px;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

nav a:hover::after {
  transform: scaleX(1);
}

nav a:hover {
  color: #f00;
}

nav li:hover a::after {
  transform: scaleX(1);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

nav li:hover a {
  color: #f00;
}

nav li:hover a::after {
  transform: scaleX(1) translateX(0%);
}

最终效果