css3 导航条效果

CSS3是现代网页设计不可或缺的一部分，其中之一就是导航条效果。通过CSS3，我们可以不使用JavaScript实现漂亮的导航条效果。

.nav {
  display: flex;
  justify-content: center;
  background-color: #333;
  height: 50px;
  font-size: 0;
}

.nav__item {
  display: inline-block;
  position: relative;
  height: 50px;
  margin: 0 10px;
}

.nav__item a {
  display: block;
  line-height: 50px;
  padding: 0 20px;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.nav__item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 4px;
  width: 0;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
}

.nav__item:hover::after {
  width: 100%;
}

.nav__item:hover a {
  transform: translateY(-5px);
}

以上代码实现了一个简单的导航条效果。其中，我们使用了flex布局，让导航项水平居中对齐。每个导航项都是一个inline-block元素，使用:hover伪类实现鼠标悬停效果。

通过给每个导航项的::after伪元素添加了过渡效果，我们实现了一个带有动画效果的下划线。同时，当鼠标悬停在导航项上时，我们对a标签应用了transform属性，实现一个简单的动效。

通过使用CSS3，我们可以为网页增加更多的功能和效果，提升用户体验。由此可见，CSS3对于现代网页设计的重要性不言而喻。