
@keyframes line {
  from {
    transform: scaleY(0)
  }
  to {
    transform: scaleY(1)
  }
}
@-webkit-keyframes line {
  from {
    transform: scaleY(0)
  }
  to {
    transform: scaleY(1)
  }
}
.sound-wave {
  position: absolute;
  width: 100px;
  height: 50px;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -50px;
  line-height: 40px;
  text-align: center;
  font-size: 0;
  span {
    display: inline-block;
    vertical-align: middle;
    width: 3px;
    height: 30px;
    margin: 0 2px;
    background-color: #2196F3;
  }
  .line1 {
    // alternate意为应该轮流反向播放动画
    animation: line 0.4s infinite ease-in-out alternate;
  }
  .line2 {
      animation: line 0.4s 0.13s infinite ease-in-out alternate;
  }

  .line3 {
      animation: line 0.4s 0.26s infinite ease-in-out alternate;
  }

  .line4 {
      animation: line 0.4s 0.4s infinite ease-in-out alternate;
  }
  &:before,
  &:after{
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 2px;
    height: 2px;
    border: 3px solid #2196F3;
    border-width: 0 3px;
    margin: 2px;
  }
}