语音声波图CSS

版权声明：你可以转载,但要标明出处 https://blog.csdn.net/qq_41605091/article/details/81387321

html端:

<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>

CSS端:

.hr{
    background-color: #1E90FF;
    width: 3px;
    height: 20px;
    float: right;
    margin-left: 12px;
    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);
    }
}