css导航--鼠标点击样式跟随滑动选中效果

应用到的icon 地址

https://ionic.io/ionicons/usage

引入icon

  <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>

使用起来很方便 点击Icons 进行查询自己想要的icon即可

dom部分

  <div class="BoxStyle">
    <div class="navigation">
      <ul>
        <li class="active">
          <a href="#">
            <span class="icon"><ion-icon name="home-outline"></ion-icon></span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="icon"><ion-icon name="people-outline"></ion-icon></span
          ></a>
        </li>

        <li>
          <a href="#">
            <span class="icon"
              ><ion-icon name="chatbubble-outline"></ion-icon></span
          ></a>
        </li>
        <li>
          <a href="#">
            <span class="icon"
              ><ion-icon name="camera-outline"></ion-icon> </span
          ></a>
        </li>
        <li>
          <a href="#">
            <span class="icon">
              <ion-icon name="settings-outline"></ion-icon></span
          ></a>
        </li>
        <div class="indicator">
          <span></span>
        </div>
      </ul>
    </div>
  </div>
   // 实现样式切换
  <script> 
      //获取所有的 li标签
      let list = document.querySelectorAll(".navigation li");
      //创建样式切换事件
      function activeLink() {
         // 遍历所有的li标签
        list.forEach((item) => {
         // 删除所有的active
          item.classList.remove("active");
        });
        //  只对选中的添加active
        this.classList.add("active");
      }
      // 为所有的li 标签添加点击事件
      list.forEach((item) => {
        item.addEventListener("click", activeLink);
      });
      console.log("list", list);
  </script>
//css
 <style lang="scss" scoped>
.BoxStyle {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;

  background-color: #ffffff;
  .navigation {
    width: 420px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: #0fa6f9;
    ul {
      width: 350px;
      display: flex;
      position: relative;
      // justify-content: space-around;
      // align-items: center;
      li {
        font-size: 20px;
        width: 70px;
        height: 70px;
        position: relative;
        z-index: 1;
        a {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          .icon {
            position: relative;
            display: block;
            font-size: 1.5em;
            color: #ffffff;
            line-height: 80px;
            opacity: 0.75;

            &:hover {
              opacity: 1;
            }
          }
        }
        &:nth-child(2).active ~ .indicator {
          transform: translateX(calc(70px * 1));
        }
        &:nth-child(3).active ~ .indicator {
          transform: translateX(calc(70px * 2));
        }
        &:nth-child(4).active ~ .indicator {
          transform: translateX(calc(70px * 3));
        }
        &:nth-child(5).active ~ .indicator {
          transform: translateX(calc(70px * 4));
        }
      }
      .active {
        // background-color: #ffffff;
        a {
          .icon {
            opacity: 1;
            color: #0fa6f9;
            transform: translateY(-8px);
          }
        }
      }
      .indicator {
        position: absolute;
        top: -10px;
        width: 57px;
        height: 60px;
        background-color: #ffffff;
        border-bottom-left-radius: 35px;
        border-bottom-right-radius: 35px;
        cursor: pointer;
        transition: 0.5s;
        border: 6px solid #ffffff;
        &::before {
          content: " ";
          position: absolute;
          top: 4px;
          left: -25px;
          width: 20px;
          height: 20px;
          background: transparent;
          border-top-right-radius: 35px;
          box-shadow: 4px -6px 0 2px #ffffff;
        }
        &::after {
          content: " ";
          position: absolute;
          top: 4px;
          right: -25px;
          width: 20px;
          height: 20px;
          background: transparent;
          border-top-left-radius: 35px;
          box-shadow: -4px -6px 0 2px #ffffff;
        }
        span {
          position: absolute;
          left: -1px;
          // top: 5px;
          width: 50px;
          height: 50px;
          border: 4px solid #0fa6f9;
          border-radius: 50%;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
          transform: scale(0.85);
        }
      }
    }
  }
}
</style>