录音波动css效果

效果

HTML/CSS

<template>
  <div>
    <div class="identify-btn-media">
      <div class="identify-btn-box active">
        <div class="loading">
          <div class="line1"></div>
          <div class="line3"></div>
          <div class="line2"></div>
          <div class="line4"></div>
          <div class="line5"></div>
          <div class="line3"></div>
          <div class="line4"></div>
          <div class="line1"></div>
          <div class="line2"></div>
        </div>
        <div class="loading">
          <div class="line1"></div>
          <div class="line3"></div>
          <div class="line2"></div>
          <div class="line4"></div>
          <div class="line5"></div>
          <div class="line3"></div>
          <div class="line4"></div>
          <div class="line1"></div>
          <div class="line2"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.identify-text {
  padding: 30rpx;
  font-size: 32rpx;
  font-weight: 400;
  color: #000;
  text-align: center;
  margin: 30rpx 20px;
}

.identify-btn-media {
  width: 100%;
  text-align: center;
}
.identify-btn-media .text {
  font-size: 28rpx;
  font-weight: 400;
  color: #999;
  margin-bottom: 36rpx;
}
.identify-btn-box {
  width: 100%;
}
.identify-btn-box .loading {
  display: none;
  vertical-align: middle;
}
.identify-btn-box.active .loading {
  display: inline-block;
}
.identify-btn-box .loading > div {
  display: inline-block;
  vertical-align: middle;
  width: 8rpx;
  background-color: #006eff;
  margin-right: 16rpx;
  border-radius: 50rpx;
}
.identify-btn-box .loading > div:last-child {
  margin-right: 0;
}
.line1 {
  animation: lines 0.5s infinite ease-in-out alternate;
}
.line2 {
  animation: lines 0.3s infinite ease-in-out alternate;
}
.line3 {
  animation: lines 0.4s infinite ease-in-out alternate;
}
.line4 {
  animation: lines 0.2s infinite ease-in-out alternate;
}
.line5 {
  animation: lines 0.6s infinite ease-in-out alternate;
}

@keyframes lines {
  from,
  10% {
    height: 4rpx;
  }
  to,
  90% {
    height: 40rpx;
  }
}
@-webkit-keyframes lines {
  from,
  10% {
    height: 4rpx;
  }
  to,
  90% {
    height: 40rpx;
  }
}
</style>