42.純 CSS 創做一個均衡器 loader 動畫

原文地址： http://www.javashuo.com/article/p-ojrfirsc-ne.html

感想： 不難，最簡單的動畫。拓展地址： https://scrimba.com/c/cWqVv9hd 。

HTML code：

<!-- equalizer : 均衡器 -->
<div class="equalizer">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

CSS code：

html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
}
.equalizer{
    width: 10em;
    height: 10em;
    display: flex;
    justify-content: space-between;
    border: 1px solid white;
}
.equalizer span{
    width: 1.5em;
    /* linear-gradient : 中心點的傾斜度 ，綠，黃，紅 ；
        線性-梯度
    */
    background: linear-gradient(0deg, green, yellow, red);
    animation: up-and-down 2s linear infinite calc(-1 * 0.4s * (var(--n) - 1));
}
@keyframes up-and-down{
    0%,100%{
        /* 剪輯路徑：插入（27%0 0 0） */
        clip-path: inset(27% 0 0 0);
    }
    10%{
        clip-path: inset(17% 0 0 0);
    }
    20% {
        clip-path: inset(55% 0 0 0);
    }
    30% {
        clip-path: inset(30% 0 0 0);
    }
    40% {
        clip-path: inset(13% 0 0 0);
    }
    50% {
        clip-path: inset(38% 0 0 0);
    }
    60% {
        clip-path: inset(80% 0 0 0);
    }
    70% {
        clip-path: inset(21% 0 0 0);
    }
    80% {
        clip-path: inset(0% 0 0 0);
    }
    90% {
        clip-path: inset(36% 0 0 0);
    }
}
.equalizer span:nth-child(1){
    --n: 1;
}
.equalizer span:nth-child(2) {
    --n: 2;
}
.equalizer span:nth-child(3) {
    --n: 3;
}
.equalizer span:nth-child(4) {
    --n: 4;
}
.equalizer span:nth-child(5) {
    --n: 5;
}