html部分

<div class="musicalNoteBg">
      <div class="musicalNote active">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
 </div>

css部分

.musicalNoteBg{ background: #59d1b6; width:100px; height:100px;display: flex; justify-content: center; align-items:center; margin:100px auto; border-radius: 100%;}
.musicalNote{display: flex; align-items: flex-end; height:35px;}
.musicalNote i{width: 4px;height: 6px; float: left; margin-left: 4px; background-color: #fff; height:35px;}
.musicalNote i:nth-of-type(1){margin-left: 0;}
.musicalNote i:nth-of-type(1){-webkit-animation:mywave 0.6s linear infinite;animation:mywave 0.6s linear infinite;}
.musicalNote i:nth-of-type(2){-webkit-animation:mywave 0.9s linear infinite;animation:mywave 0.9s linear infinite;}
.musicalNote i:nth-of-type(3){-webkit-animation:mywave 0.7s linear infinite;animation:mywave 0.7s linear infinite;}
.musicalNote i:nth-of-type(4){-webkit-animation:mywave 0.5s linear infinite;animation:mywave 0.5s linear infinite;}
.musicalNote i:nth-of-type(5){-webkit-animation:mywave 0.9s linear infinite;animation:mywave 0.9s linear infinite;}
.musicalNote i:nth-of-type(6){-webkit-animation:mywave 1.2s linear infinite;animation:mywave 1.2s linear infinite;}
@-webkit-keyframes mywave{
    0%{height:8px}
    50%{height: 32px}
    100%{height: 12px}
}
@keyframes mywave{
    0%{height:8px}
    50%{height: 32px}
    100%{height: 12px}
}

效果圖