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}
}
效果圖
