❧ CSS 实现录音声波动效

<div class="liner-box">
    <span class="lines">
      <hr class="hr hr1">
      <hr class="hr hr2">
      <hr class="hr hr3">
      <hr class="hr hr4">
      <hr class="hr hr5">
      <hr class="hr hr6">
      <hr class="hr hr7">
      <hr class="hr hr8">
      <hr class="hr hr9">
      <hr class="hr hr10">
    </span>
</div>

.hr{
    border:none;
    background-color: #f60;
    width: 2px;
    height: 8px;
    float: right;
    margin: 0 2px;
    animation: liner 0.2s ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.hr1{
    animation-delay: -2s;
}
.hr2{
    animation-delay: -1.9s;
}
.hr3{
    animation-delay: -1.8s;
}
.hr4{
    animation-delay: -1.7s;
}
.hr5{
    animation-delay: -1.6s;
}
.hr6{
    animation-delay: -1.5s;
}
.hr7{
    animation-delay: -1.4s;
}
.hr8{
    animation-delay: -1.3s;
}
.hr9{
    animation-delay: -1.2s;
}
.hr10{
    animation-delay: -1.1s;
}
@keyframes liner {
    0% {
        transform: scaleY(1);
    }
    100% {
        transform: scaleY(6);
    }
}