.sound-wave {
  display: flex;
  .sound-bar {
    width: 8px;
    height: 20px;
    border-radius: 2px;
    background: linear-gradient(180deg, #00edff 0%, #00b9ff 100%);
    margin-right: 2px;
    transform: scaleY(1);
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    opacity: 0.8;
    filter: blur(1);


    &:nth-child(4n) {
      animation-name: bar-scale-xl;
      animation-duration: 0.8 + 0.2s;
      --i: 1;
    }
    &:nth-child(4) {
      animation-duration: 0.8 + 0.35s;
      --i: 2;
    }
    &:nth-child(3) {
      animation-name: bar-scale-lg;
      animation-duration: 0.8 + 0s;
      --i: 3;
    }
    &:nth-child(6) {
      animation-name: bar-scale-md;
      animation-duration: 0.8 + 0.05s;
      --i: 6;
    }

    &:nth-child(1) {
      animation-name: bar-scale-sm;
      animation-duration: 0.9 + 0.15s;
    }


    &:nth-child(2),
    &:nth-child(5),
    &:nth-child(7),
    &:nth-child(9) {
      animation-name: bar-scale-sm;
      animation-duration: 0.9s;
    }
  }

  /* 定义不同跳动效果的动画 */
  @keyframes bar-scale-sm {
    0%,
    50% {
      transform: scaleY(1);
    }
    25% {
      transform: scaleY(6);
    }
    75% {
      transform: scaleY(4);
    }
  }

  @keyframes bar-scale-md {
    0%,
    50% {
      transform: scaleY(2);
    }
    25% {
      transform: scaleY(6);
    }
    75% {
      transform: scaleY(5);
    }
  }

  @keyframes bar-scale-lg {
    0%,
    50% {
      transform: scaleY(8);
    }
    25% {
      transform: scaleY(4);
    }
    75% {
      transform: scaleY(6);
    }
  }

  @keyframes bar-scale-xl {
    0%,
    50% {
      transform: scaleY(1);
    }
    25% {
      transform: scaleY(7);
    }
    75% {
      transform: scaleY(11);
    }
  }
}