SVG&Canvas Notes4:动态条形

Demo

<svg height="0" width="0">
    <symbol id="beats" viewBox="0 0 100 100" >
        <line class="beat" x1="15" y1="40" x2="15" y2="100" stroke="currentColor" stroke-width="10" stroke-linecap="round"></line>
        <line class="beat" x1="50" y1="40" x2="50" y2="100" stroke="currentColor" stroke-width="10"  stroke-linecap="round"></line>
        <line class="beat" x1="85" y1="40" x2="85" y2="100" stroke="currentColor" stroke-width="10"  stroke-linecap="round"></line>
    </symbol>
</svg>

<span style="color:#ff6699; border: 1px solid #ff6699;border-radius: 5px; padding-left: 5px; font-size: 24px;">
    <svg height="30" width="30">
         <use href="#beats"></use>   <!--href="#beats"所指向的就是上面<symbol>标签的id-->
    </svg>
    <span>直播中</span>
</span>



.beat{
    transform-origin: bottom;   //将变换参考点设置成`<svg>元素`的底部
    animation: beat-scale 1.4s linear infinite;
}
        
@keyframes beat-scale{
    25%{
         transform: scaleY(0.3);
    }
    50%{
         transform: scaleY(1);
    }
    75%{
         transform: scaleY(0.3);
    }
}

.beat:nth-child(1){
    animation-delay: 0.4s;
}
.beat:nth-child(2){
    animation-delay: 0.2s;
}