css3 制作音乐播放器音乐播放跳动音符

// html代码
<div class="movement">
      <div class="li li-1">
            <span></span>
        </div>
        <div class="li li-2">
            <span></span>
        </div>
        <div class="li li-3">
            <span></span>
        </div>
        <div class="li li-4">
            <span></span>
        </div>
    </div>
   // css 代码
   @keyframes waves {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(100%);
    }
}
.movement {
    display: inline-block;
    line-height: normal;

    & > .li {
        position: relative;
        display: inline-block;
        height: 22px;
        width: 2px;
        overflow: hidden;
        margin-right: 4px;

        & > span {
            position: absolute;
            bottom: 0;
            // display: block;
            height: 22px;
            width: 100%;
            background: $theme1_B0;
        }
    }

    & > .li-1 span {
        height: 100%;
        animation: waves 0.6s linear infinite;
    }

    & > .li-2 span {
        animation: waves 0.9s linear infinite;
    }

    & > .li-3 span {
        animation: waves 1s linear infinite;
    }

    & > .li-4 span {
        animation: waves 0.8s linear infinite;
    }
}