zoukankan      html  css  js  c++  java
  • 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;
    }
  • 相关阅读:
    Idea快捷键
    Java学习之路--书籍推荐
    泵式等待基元
    uni-app,wex5,APPcan,ApiCloud几款国内webapp开发框架的选型对比
    前端框架2019 云开发
    select2 javascript控件 如何设置指定的值
    Github 索引
    linux
    WPF 中的 Uri 地址的不同写法
    WPF GridSplitter 使用技巧
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10436982.html
Copyright © 2011-2022 走看看