HTML&CSS ：这么丝滑的加载loading你不学学？这段代码创建了一个动态的旋转加载动画，通过 CSS 技术实现了

这段代码创建了一个动态的旋转加载动画，通过 CSS 技术实现了小条的旋转和伸缩效果，为页面添加了视觉吸引力和动态感。

演示效果

HTML&CSS

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            background: #e8e8e8;
        }

        .spinner {
            position: absolute;
            width: 9px;
            height: 9px;
        }

        .spinner div {
            position: absolute;
            width: 50%;
            height: 150%;
            background: #000000;
            transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
            animation: spinner-fzua35 1s calc(var(--delay) * 1s) infinite ease;
        }

        .spinner div:nth-child(1) {
            --delay: 0.1;
            --rotation: 36;
            --translation: 150;
        }

        .spinner div:nth-child(2) {
            --delay: 0.2;
            --rotation: 72;
            --translation: 150;
        }

        .spinner div:nth-child(3) {
            --delay: 0.3;
            --rotation: 108;
            --translation: 150;
        }

        .spinner div:nth-child(4) {
            --delay: 0.4;
            --rotation: 144;
            --translation: 150;
        }

        .spinner div:nth-child(5) {
            --delay: 0.5;
            --rotation: 180;
            --translation: 150;
        }

        .spinner div:nth-child(6) {
            --delay: 0.6;
            --rotation: 216;
            --translation: 150;
        }

        .spinner div:nth-child(7) {
            --delay: 0.7;
            --rotation: 252;
            --translation: 150;
        }

        .spinner div:nth-child(8) {
            --delay: 0.8;
            --rotation: 288;
            --translation: 150;
        }

        .spinner div:nth-child(9) {
            --delay: 0.9;
            --rotation: 324;
            --translation: 150;
        }

        .spinner div:nth-child(10) {
            --delay: 1;
            --rotation: 360;
            --translation: 150;
        }

        @keyframes spinner-fzua35 {

            0%,
            10%,
            20%,
            30%,
            50%,
            60%,
            70%,
            80%,
            90%,
            100% {
                transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
            }

            50% {
                transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1.5%));
            }
        }
    </style>
</head>

<body>
    <div class="spinner">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

</html>

HTML 结构

spinner: 创建一个类名为“spinner”的 div 元素，用于包含动画的各个部分。
每个 div 代表一个旋转的小条，总共有 10 个小条。

CSS 样式

body: 设置页面的边距、填充、高度、显示方式和对齐方式，背景色为浅灰色。
.spinner: 设置加载动画的容器样式，包括位置、尺寸。
.spinner div: 设置每个小条的样式，包括位置、尺寸、背景色、旋转和伸缩动画。
.spinner div:nth-child(n): 为每个小条设置不同的延迟时间、旋转角度和伸缩距离，通过 CSS 变量--delay、--rotation 和--translation 实现。
@keyframes spinner-fzua35: 定义旋转和伸缩的动画效果，使每个小条在旋转的同时进行伸缩。
每个小条通过 animation 属性应用 spinner-fzua35 动画，实现旋转和伸缩效果。
每个小条的动画延迟时间不同，通过--delay 变量控制，使动画效果更加流畅。
每个小条的旋转角度通过--rotation 变量控制，形成一个完整的圆环。
每个小条的伸缩距离通过--translation 变量控制，使动画效果更加明显。