CSS完成Loading...效果._css实现loading效果-优快云博客

本文链接：https://blog.youkuaiyun.com/ftz123666/article/details/131472187

该代码示例展示了如何使用HTML和CSS创建一个中心对齐的方块，其中包含20个绝对定位的列表项。每个列表项通过CSS变量`--index`控制旋转角度，并应用关键帧动画`identifier`来实现元素的缩放效果，创建出动态的旋转动画展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .main {
            max-width: 100vw;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background-color: #2c3a47;
            align-items: center;
            justify-content: center;
        }

        #ul {
            position: relative;
            width: 120px;
            height: 120px;
        }

        li {
            list-style: none;
            position: absolute;
            width: 100%;
            height: 100%;
            transform: rotate(calc(20deg*var(--index)));
            /* animation: identifier 3s linear infinite; */
        }

        li::before {
            content: '';
            position: absolute;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: #999999;
            animation: identifier 2s linear infinite;
            animation-delay: calc(0.2s*var(--index));
        }

        @keyframes identifier {
            0% {
                transform: scale(1);
            }

            100% {
                transform: scale(0);
            }
        }
    </style>
</head>

<body>
    <div class="main">
        <ul id="ul">
            <li style="--index:1"></li>
            <li style="--index:2"></li>
            <li style="--index:3"></li>
            <li style="--index:4"></li>
            <li style="--index:5"></li>
            <li style="--index:6"></li>
            <li style="--index:7"></li>
            <li style="--index:8"></li>
            <li style="--index:9"></li>
            <li style="--index:10"></li>
            <li style="--index:11"></li>
            <li style="--index:12"></li>
            <li style="--index:13"></li>
            <li style="--index:14"></li>
            <li style="--index:15"></li>
            <li style="--index:16"></li>
            <li style="--index:17"></li>
            <li style="--index:18"></li>
            <li style="--index:19"></li>
            <li style="--index:20"></li>


        </ul>
    </div>
</body>

</html>