loading动画纯css

maoge_666

已于 2024-07-29 11:10:37 修改

阅读量270

点赞数 3

文章标签： css css3 前端

于 2024-07-29 11:08:45 首次发布

本文链接：https://blog.csdn.net/maoge_666/article/details/140766310

版权

效果：
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/main.css">
</head>

<body>
    <div class="container">
        <div class="loading">
            <div class="blocks" style="--i:1;"></div>
            <div class="blocks" style="--i:2;"></div>
            <div class="blocks" style="--i:3;"></div>
            <div class="blocks" style="--i:4;"></div>
            <div class="blocks" style="--i:5;"></div>
            <div class="blocks" style="--i:6;"></div>
            <div class="blocks" style="--i:7;"></div>
            <div class="blocks" style="--i:8;"></div>
            <div class="blocks" style="--i:9;"></div>
            <div class="blocks" style="--i:10;"></div>
            <div class="blocks" style="--i:11;"></div>
            <div class="blocks" style="--i:12;"></div>
            <div class="blocks" style="--i:13;"></div>
            <div class="blocks" style="--i:14;"></div>
            <div class="blocks" style="--i:15;"></div>
            <div class="blocks" style="--i:16;"></div>
            <div class="blocks" style="--i:17;"></div>
            <div class="blocks" style="--i:18;"></div>
            <div class="blocks" style="--i:19;"></div>
            <div class="blocks" style="--i:20;"></div>
            <h3>loading</h3>
        </div>
    </div>
</body>

</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #001d10;
    animation: animateBackgroundColor 10s linear infinite;
}

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

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

.loading {
    position: relative;
    width: 250px;
    height: 250px;
}

.loading .blocks {
    position: absolute;
    width: 8px;
    height: 25px;
    background: #050c09;
    border-radius: 8px;
    left: 50%;
    transform: rotate(calc(18deg * var(--i)));
    transform-origin: 0 125px;
    animation: animate 1.9s ease-in-out infinite;
    animation-delay: calc(0.05s * var(--i));
}

@keyframes animate {

    0%,
    50% {
        background: #050c09;
        box-shadow: none;
    }

    50.1%,
    100% {
        background: #0f0;
        box-shadow: 0 0 5px #0f0,
            0 0 15px #0f0,
            0 0 30px #0f0,
            0 0 60px #0f0,
            0 0 90px #0f0;
    }
}

.loading h3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 2em;
    letter-spacing: 2px;
    animation: animateText 2s ease-in-out infinite;
    animation-delay: -1s;
}

@keyframes animateText {

    0%,
    50% {
        color: #050c09;
        text-shadow: none;
    }

    50.1%,
    100% {
        color: #0f0;
        text-shadow: 0 0 5px #0f0,
            0 0 15px #0f0;
    }
}