【每日一练】47—创意导航菜单栏动画效果

转载

wx6332e0803afcf 2022-11-08 08:42:53

文章标签 ico html 5e 文章分类 Java 后端开发

【每日一练】47—创意导航菜单栏动画效果_ico

在前面我们练习了很多小项目，同时，在视频号【web前端开发的视频】上面，我也跟大家分享了很多的练习案例视频，希望对你有用。

而今天我们练习的这个小案例是一个导航栏滑动动画效果，具体如下：

【每日一练】47—创意导航菜单栏动画效果_5e_02

我们看完了上面的gif动画效果，我们现在一起来看看代码实现的过程。

HTML代码：

<!DOCTYPE html>
<html>
<head>
<title>【每日一练】47—创意导航菜单栏动画效</title>
</head>
<body>
  <div class="navigation">
    <ul>
      <li class="list active">
        <a href="#">
          <span class="icon" style="--clr:#f44336;">
            <ion-icon name="home-outline"></ion-icon>
          </span>
        </a>
      </li>
      <li class="list">
        <a href="#">
          <span class="icon" style="--clr:#ffa117;">
            <ion-icon name="person-outline"></ion-icon>
          </span>
        </a>
      </li>
      <li class="list">
        <a href="#">
          <span class="icon" style="--clr:#0fc70f;">
            <ion-icon name="chatbubble-outline"></ion-icon>
          </span>
        </a>
      </li>
      <li class="list">
        <a href="#">
          <span class="icon" style="--clr:#2196f3;">
            <ion-icon name="camera-outline"></ion-icon>
          </span>
        </a>
      </li>
      <li class="list">
        <a href="#">
          <span class="icon" style="--clr:#b145e9;">
            <ion-icon name="settings-outline"></ion-icon>
          </span>
        </a>
      </li>
      <div class="indicator"></div>
    </ul>
  </div>


  <script>
    const list = document.querySelectorAll('.list');
    function activeLink(){
      list.forEach((item) =>
      item.classList.remove('active'));
      this.classList.add('active')
    }
    list.forEach((item) =>
    item.addEventListener('click',activeLink));
</script>
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>

CSS代码：

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body 
{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #222327;
}
.navigation 
{
  position: relative;
  width: 400px;
  height: 60px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}
.navigation ul 
{
  display: flex;
  width: 350px;
}
.navigation ul li 
{
  list-style: none;
  position: relative;
  /* 350 / 5 = 70 */
  width: 70px;
  height: 60px;
  z-index: 2;
}
.navigation ul li a 
{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  text-align: center;
}
.navigation ul li a .icon 
{
  position: relative;
  display: block;
  line-height: 65px;
  font-size: 1.5em;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  transition: 0.5s;
  transition-delay: 0s;
  color: #222327;
}
.navigation ul li.active a .icon 
{
  transform: translateY(-27px);
  color: #fff;
  transition-delay: 0.25s;
  background: var(--clr);
}
.navigation ul li a .icon::before
{
  content: '';
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.5s;
  transition-delay: 0s;
  border-radius: 50%;
  background: var(--clr);
  filter: blur(5px);
  opacity: 0;
}
.navigation ul li.active a .icon::before
{
  transition-delay: 0.5s;
  opacity: 0.5;
}
.indicator 
{
  position: absolute;
  top: -35px;
  width: 70px;
  height: 70px;
  background: #fff;
  border-radius: 50%;
  z-index: 1;
  transition: 0.5s;
}
.indicator::before 
{
  content: '';
  position: absolute;
  top: 5px;
  left: -28px;
  width: 30px;
  height: 30px;
  background: transparent;
  border-radius: 50%;
  box-shadow: 15px 18px #fff;
}
.indicator::after 
{
  content: '';
  position: absolute;
  top: 5px;
  right: -28px;
  width: 30px;
  height: 30px;
  background: transparent;
  border-radius: 50%;
  box-shadow: -15px 18px #fff;
}


.navigation ul li:nth-child(1).active ~ .indicator 
{
  transform: translateX(calc(70px * 0));
}
.navigation ul li:nth-child(2).active ~ .indicator 
{
  transform: translateX(calc(70px * 1));
}
.navigation ul li:nth-child(3).active ~ .indicator 
{
  transform: translateX(calc(70px * 2));
}
.navigation ul li:nth-child(4).active ~ .indicator 
{
  transform: translateX(calc(70px * 3));
}
.navigation ul li:nth-child(5).active ~ .indicator 
{
  transform: translateX(calc(70px * 4));
}