CSS实现三个加载中的小动画

Sirius小鑫

已于 2023-04-10 08:38:02 修改

阅读量1.2k

点赞数 3

分类专栏： HTML+CSS+JavaScript 文章标签： css css3 html

于 2023-04-09 18:47:13 首次发布

本文链接：https://blog.csdn.net/qq_62283591/article/details/130045485

版权

HTML+CSS+JavaScript 专栏收录该内容

3 篇文章 7 订阅

订阅专栏

CSS加载中动画

🌳加载中动画1
🌱加载中动画2
🍀加载中动画3

🌳加载中动画1

加载动画1

<!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>Loading1</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
        }

        .flex-loading {
            width: 200px;
            height: 36px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%)
        }

        .flex-loading li {
            width: 4px;
            height: 12px;
            display: inline-block;
            background: #000;
            margin: 0 2px;
            /* 动画名：flex-loading，
             * 执行时长：0.8s，
             * 动画执行速度：ease-in-out(指定开始和结束较慢的动画)，
             * 动画执行次数：infinite(无限次) */
            animation: flex-loading 0.8s ease-in-out infinite;
            /* 每个小格子的伸缩动画分别延迟0.1s，0.2s，0.3s...执行，
             * var(--time)使用CSS3变量 */
            animation-delay: calc(0.1s * var(--time));
        }

        @keyframes flex-loading {

            0%,
            25%,
            50% {
                transform: scaleY(1);
            }
            /* 小格子纵向伸展到原来的4倍 */
            75% {
                transform: scaleY(4);
            }
        }
    </style>
</head>

<body>
    <ul class="flex-loading">
        <li style="--time:1"></li>
        <li style="--time:2"></li>
        <li style="--time:3"></li>
        <li style="--time:4"></li>
        <li style="--time:5"></li>
        <li style="--time:6"></li>
        <li style="--time:7"></li>
        <li style="--time:8"></li>
    </ul>
</body>

</html>
</html>

🌱加载中动画2

加载动画2

<!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>Loading2</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
        }

        .rotate-loading {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            border: 6px solid rgba(200, 200, 200, 0.5);
            border-top: 6px solid black;
            animation: rotate-loading 1s linear infinite;
        }

        @keyframes rotate-loading {
            0% {
                transform: rotate(0deg);
            }

            100% {
                /* 顺时针旋转360度 */
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="rotate-loading"></div>
</body>

</html>

🍀加载中动画3

加载动画3

<!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>Loading3</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
        }

        .wave-loading {
            width: 400px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .wave-loading span {
            display: inline-block;
            font-size: 30px;
            font-weight: bold;
            font-family: 'Courier New', Courier, monospace;
            animation: wave-loading 1s ease-in-out infinite;
            animation-delay: calc(0.1s * var(--time));
        }

        @keyframes wave-loading {
            0% {
                transform: translateY(0px);
            }

            25% {
                transform: translateY(-20px);
            }

            50%,100% {
                transform: translateY(0px);
            }
        }
    </style>
</head>

<body>
    <div class="wave-loading">
        <span style="--time:1">l</span>
        <span style="--time:2">o</span>
        <span style="--time:3">a</span>
        <span style="--time:4">d</span>
        <span style="--time:5">i</span>
        <span style="--time:6">n</span>
        <span style="--time:7">g</span>
        <span style="--time:8">.</span>
        <span style="--time:9">.</span>
        <span style="--time:10">.</span>
    </div>
</body>

</html>