#yyds干货盘点#CSS导航条动画效果

1.效果

2.代码

// html
<div class="menu">
  <div class="item">新闻</div>
  <div class="item">产品</div>
  <div class="item">博客</div>
  <div class="item">联系我们</div>
</div>
// css
.menu {
  display: flex
}

.menu .item {
  width: 100px;
  height: 60px;
  background-color: #000;
  color: white;
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item:before {
  content: '';
  height: 4px;
  background-color: #bb3;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: scaleX(0);
  transition: .3s;
}

.item:hover:before {
  transform: scaleX(1);
}

3.总结

• 绝对定位的使用
• CSS3中过渡效果的使用