css3 loading 效果2
使用了css自定义属性var  
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    :root {
        --t: 1s;
    }

    body {
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        height: 100vh;
        margin: 0;
        flex-direction: column;

    }

    .loading {
        width: 200px;
        height: 200px;
        position: relative;
        animation: animateBackground 10s linear infinite;
    }

    .loading div {
        width: 20px;
        height: 20px;
        background-color: #050c09;
        position: absolute;
        left: 100px;
        margin-left: -10px;
        transform-origin: 10px 100px;
        border-radius: 50%;
        animation: ball var(--t) linear infinite;
        /* animation-delay: calc(calc(1s / 9) * var(--i)); */
        animation-delay: calc(var(--t) / 2 / 9 * var(--i));
        transform: rotate(calc(40deg * var(--i)));

    }

    h3 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        letter-spacing: 5px;
        animation: textAnimate var(--t) ease-in-out infinite;
    }

    @keyframes animateBackground {
        0% {
            filter: hue-rotate(0deg);
        }


        100% {
            filter: hue-rotate(360deg);

        }
    }

    @keyframes textAnimate {

        0%,
        50% {
            color: #0f0;
        }

        51.1%,
        100% {
            color: #050c09;
        }
    }

    @keyframes ball {

        0%,
        50% {
            background-color: #0f0;
            box-shadow: 0 0 5px #0f0, 0 0 8px #0f0
        }

        51.1%,
        100% {

            background-color: #050c09;

        }
    }
</style>

<body>

    <div class="loading">
        <div style="--i:0"></div>
        <div style="--i:1"></div>
        <div style="--i:2"></div>
        <div style="--i:3"></div>
        <div style="--i:4"></div>
        <div style="--i:5"></div>
        <div style="--i:6"></div>
        <div style="--i:7"></div>
        <div style="--i:8"></div>
        <h3>loading</h3>
    </div>


</body>

</html>

 使用opactity

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    :root {
        --t: 1s;
    }

    body {
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        height: 100vh;
        margin: 0;
        flex-direction: column;

    }

    .loading {
        width: 200px;
        height: 200px;
        position: relative;
        /* animation: animateBackground 10s linear infinite; */
    }

    .loading div {
        width: 20px;
        height: 20px;
        background-color: #050c09;
        position: absolute;
        left: 100px;
        margin-left: -10px;
        transform-origin: 10px 100px;
        border-radius: 50%;
        animation: ball var(--t) linear infinite;
        /* animation-delay: calc(calc(1s / 9) * var(--i)); */
        animation-delay: calc(var(--t) / 9 * var(--i));
        transform: rotate(calc(40deg * var(--i)));

    }

    h3 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        letter-spacing: 5px;
    }



    @keyframes ball {

        0% {
            opacity: 1;
        }

        100% {

            opacity: 0.2;

        }
    }
</style>

<body>

    <div class="loading">
        <div style="--i:0"></div>
        <div style="--i:1"></div>
        <div style="--i:2"></div>
        <div style="--i:3"></div>
        <div style="--i:4"></div>
        <div style="--i:5"></div>
        <div style="--i:6"></div>
        <div style="--i:7"></div>
        <div style="--i:8"></div>
        <h3>loading</h3>
    </div>


</body>

</html>

 

posted on 2023-07-19 01:48  码农-编程小子  阅读(7)  评论(0)  编辑  收藏  举报