带有下划线悬停动画的 CSS 菜单列表 - CSS

这是一个使用 CSS 实现的下划线悬停动画效果的菜单列表。

效果演示

可以通过点击下方链接查看效果演示：

查看效果演示

如何使用

为了实现这个效果，你需要的是：

1. 使用 ul 和 li 标签创建菜单列表。

2. 为 li 标签添加 hover 伪类样式，并使用 ::before 创建下划线元素。

3. 通过 CSS3 过渡效果（transition）和位移（translateX）属性来创建动画效果。

<ul class="menu-list">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

.menu-list li {
  display: inline-block;
  position: relative;
  margin-right: 30px;
}

.menu-list li a {
  position: relative;
  z-index: 1;
  text-decoration: none;
  color: #333;
}

.menu-list li a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

.menu-list li a:hover::before {
  visibility: visible;
  transform: scaleX(1);
}

代码解释

1. .menu-list 类用于定义菜单列表的样式，包含了 margin 和 position 属性等。

2. .menu-list li 类用于定义列表项的样式，包含了 display 和 position 属性等。

3. .menu-list li a 类用于定义链接的样式，包含了 position 和 z-index 属性等。

4. .menu-list li a::before 类用于创建下划线元素，包含了 content、position 和 background-color 属性等。

5. .menu-list li a:hover::before 类用于定义鼠标悬停时下划线元素的样式，包含了 visibility 和 transform 属性等，使用 CSS3 过渡效果和位移属性来创建下划线悬停动画。

总结

这是一个使用 CSS 实现的下划线悬停动画效果的菜单列表，可以增强网页的交互性，提高用户体验。你可以通过修改样式文件，实现不同的菜单样式和动画效果。