[分享]css做菜单过渡效果

CSS做菜单过渡效果是网页设计中常用的技巧，可以使网页菜单在鼠标悬停或点击时出现过渡效果，从而增强用户体验。.navmenu { display: flex; } .navitem { marginr...

CSS做菜单过渡效果是网页设计中常用的技巧，可以使网页菜单在鼠标悬停或点击时出现过渡效果，从而增强用户体验。

.nav-menu {
  display: flex;
}

.nav-item {
  margin-right: 20px;
  position: relative;
}

.nav-link {
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
}

.nav-link::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: #333;
  transition: all 0.3s ease-in-out;
  transform: translateX(-50%);
}

.nav-link:hover::before,
.nav-link:focus::before {
  width: 100%;
} 

以上代码是一个简单的CSS过渡效果，通过为菜单链接添加伪元素，然后在鼠标悬停或点击时通过CSS过渡属性来实现效果。

包含了一个横线逐渐变长，表明了鼠标已经悬浮在某个按钮上。可以通过修改伪元素的属性，达到不同的菜单过渡效果。