42.纯 CSS 创作一个均衡器 loader 动画

42.纯 CSS 创作一个均衡器 loader 动画

原文地址： https://segmentfault.com/a/1190000015157160

感想： 不难，最简单的动画。拓展地址： 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;
}

 

posted on 2019-02-26 14:12  人生与戏 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/FlyingLiao/p/10436982.html