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}

}

效果图

想要了解更多HTML5内容的小伙伴可以关注职坐标WEB前端HTML5/CSS3频道！