html,body {
  margin: 0;
  font-family: "PingFang SC", "Microsoft Yahei", sans-serif;
}

* {
  box-sizing: border-box;
}

.daohang-ul,.daohang-li {
  z-index: 2;
  margin: 0;
  padding: 0;
  z-index: 2;
}
.daohang-header{
  position: fixed;
  width: 100%;
  height: 78px;
  background-color: rgba(182, 182, 182, 0.4);
  z-index: 2;
}
.daohang-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 15px;
  padding-bottom: 15px;
  z-index: 9998;
  width: 1000px;
  height: 78px;
  float: left;
  position: absolute;
  left: 33%;
  z-index: 2;
}

.daohang-ul {
  position: fixed;
  display: flex;
  z-index: 2;
}

.daohang-ul .daohang-li {
  /* 如果设置为inline-block，会有空隙 */
  /* https://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements */
  list-style: none;
  width: 120px;
  line-height: 40px;
  text-align: center;
  font-size: 17px;
  z-index: 2;
}

.daohang-ul .daohang-li a {
  color: rgb(0, 0, 0);
  text-decoration: none;
  z-index: 2;
}
.daohang-ul .daohang-li:hover>a{
  color: rgb(255, 255, 255);
  text-decoration: none;
  z-index: 2;
}
.slider {
  width: 100px;
  height: 40px;
  background-color: #0099ff;
  border-radius: 4px;
  position: absolute;
  left: 10px;
  bottom: 0;
  z-index: -1;
  transition: all ease 0.4s;
  animation: 2s ease-in-out waves infinite;
}

.daohang-li:nth-child(1):hover ~ .slider {
  left: 10px;
}

.daohang-li:nth-child(2):hover ~ .slider {
  left: 128px;
}

.daohang-li:nth-child(3):hover ~ .slider {
  left: 240px;
  width: 120px;
}

.daohang-li:nth-child(4):hover ~ .slider {
  left: 368px;
}

.daohang-li:nth-child(5):hover ~ .slider {
  left: 488px;
}

@keyframes waves {
  from {
    clip-path: polygon(
      0% 17%,
      9% 10%,
      18% 4%,
      30% 0%,
      43% 1%,
      49% 4%,
      57% 7%,
      66% 10%,
      78% 11%,
      89% 11%,
      96% 9%,
      100% 7%,
      100% 100%,
      0% 100%
    );
  }
  50% {
    clip-path: polygon(
      0% 4%,
      6% 9%,
      13% 13%,
      23% 15%,
      31% 16%,
      42% 15%,
      49% 13%,
      61% 10%,
      71% 5%,
      81% 3%,
      90% 2%,
      100% 5%,
      100% 100%,
      0% 100%
    );
  }
  to {
    clip-path: polygon(
      0% 17%,
      9% 10%,
      18% 4%,
      30% 0%,
      43% 1%,
      49% 4%,
      57% 7%,
      66% 10%,
      78% 11%,
      89% 11%,
      96% 9%,
      100% 7%,
      100% 100%,
      0% 100%
    );
  }
}
.daohang-img{
    width: 350px;
    z-index: 3;
    position: fixed;
    top: 5px;
    left: 18%;

}