纯CSS实现方块下落等待动画

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方块下落等待动画</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .rglg_container {
            width: 200px;
            height: 200px;
            overflow: hidden;
            position: relative;
            margin: auto;
        }

        /* 网格背景 */
        .rglg_grid {
            position: absolute;
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            gap: 4px;
            padding: 10px;
        }

        .rglg_grid-cell {
            border: 1px dashed rgba(35, 31, 31, 0.8);
            border-radius: 4px;
        }

        .rglg_inner-container {
            --gap: 4px;
            --size: calc((100% - var(--gap) * 2) / 3);
            --long: calc(var(--size) * 3 + var(--gap) * 2);
            --Dlong: calc(var(--long) * (-1));
            position: absolute;
            width: 100%;
            height: 100%;
            padding: 10px;
        }

        /* 方块容器 */
        .rglg_blocks {
            position: relative;
            width: var(--long);
            height: var(--long);
        }

        /* 方块通用样式 */
        .rglg_block {
            position: absolute;
            width: var(--size);
            height: var(--size);
            border-radius: 4px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
        }

        .rglg_block {
            left: calc(var(--col) * var(--gap) + var(--size) * var(--col));
            bottom: calc(var(--row) * var(--gap) + var(--size) * var(--row));
            background: var(--color);
        }


        /* 每个方块有不同的延迟，但共享相同的循环周期 */
        @keyframes rglg_ani0 {
            0% {
                transform: translateY(var(--Dlong)) rotate(0deg);
                opacity: 0;
            }
            10% {
                transform: translateY(20px) rotate(5deg);
                opacity: 1;
            }
            15% {
                transform: translateY(-10px) rotate(-3deg);
            }
            20% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
            25%, 100% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
        }

        @keyframes rglg_ani1 {
            0%, 5% {
                transform: translateY(var(--Dlong)) rotate(0deg);
                opacity: 0;
            }
            15% {
                transform: translateY(20px) rotate(5deg);
                opacity: 1;
            }
            20% {
                transform: translateY(-10px) rotate(-3deg);
            }
            25% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
            30%, 100% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
        }

        @keyframes rglg_ani2 {
            0%, 10% {
                transform: translateY(var(--Dlong)) rotate(0deg);
                opacity: 0;
            }
            20% {
                transform: translateY(20px) rotate(5deg);
                opacity: 1;
            }
            25% {
                transform: translateY(-10px) rotate(-3deg);
            }
            30% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
            35%, 100% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
        }

        @keyframes rglg_ani3 {
            0%, 15% {
                transform: translateY(var(--Dlong)) rotate(0deg);
                opacity: 0;
            }
            25% {
                transform: translateY(20px) rotate(5deg);
                opacity: 1;
            }
            30% {
                transform: translateY(-10px) rotate(-3deg);
            }
            35% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
            40%, 100% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
        }

        @keyframes rglg_ani4 {
            0%, 20% {
                transform: translateY(var(--Dlong)) rotate(0deg);
                opacity: 0;
            }
            30% {
                transform: translateY(20px) rotate(5deg);
                opacity: 1;
            }
            35% {
                transform: translateY(-10px) rotate(-3deg);
            }
            40% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
            45%, 100% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
        }

        @keyframes rglg_ani5 {
            0%, 25% {
                transform: translateY(var(--Dlong)) rotate(0deg);
                opacity: 0;
            }
            35% {
                transform: translateY(20px) rotate(5deg);
                opacity: 1;
            }
            40% {
                transform: translateY(-10px) rotate(-3deg);
            }
            45% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
            50%, 100% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
        }

        @keyframes rglg_ani6 {
            0%, 30% {
                transform: translateY(var(--Dlong)) rotate(0deg);
                opacity: 0;
            }
            40% {
                transform: translateY(20px) rotate(5deg);
                opacity: 1;
            }
            45% {
                transform: translateY(-10px) rotate(-3deg);
            }
            50% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
            55%, 100% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
        }

        @keyframes rglg_ani7 {
            0%, 35% {
                transform: translateY(var(--Dlong)) rotate(0deg);
                opacity: 0;
            }
            45% {
                transform: translateY(20px) rotate(5deg);
                opacity: 1;
            }
            50% {
                transform: translateY(-10px) rotate(-3deg);
            }
            55% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
            60%, 100% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
        }

        @keyframes rglg_ani8 {
            0%, 40% {
                transform: translateY(var(--Dlong)) rotate(0deg);
                opacity: 0;
            }
            50% {
                transform: translateY(20px) rotate(5deg);
                opacity: 1;
            }
            55% {
                transform: translateY(-10px) rotate(-3deg);
            }
            60% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
            65%, 100% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
        }
    </style>
</head>
<body>
<div class="rglg_container">
    <div class="rglg_grid">
        <div class="rglg_grid-cell"></div>
        <div class="rglg_grid-cell"></div>
        <div class="rglg_grid-cell"></div>
        <div class="rglg_grid-cell"></div>
        <div class="rglg_grid-cell"></div>
        <div class="rglg_grid-cell"></div>
        <div class="rglg_grid-cell"></div>
        <div class="rglg_grid-cell"></div>
        <div class="rglg_grid-cell"></div>
    </div>

    <div class="rglg_inner-container">
        <div class="rglg_blocks">
            <div class="rglg_block" style="--row:0;--col:0;--color:#4cc9f0; animation: rglg_ani0 3s infinite"></div>
            <div class="rglg_block" style="--row:0;--col:1;--color:#4895ef; animation: rglg_ani1 3s infinite"></div>
            <div class="rglg_block" style="--row:0;--col:2;--color:#4361ee; animation: rglg_ani2 3s infinite"></div>
            <div class="rglg_block" style="--row:1;--col:0;--color:#3f37c9; animation: rglg_ani3 3s infinite"></div>
            <div class="rglg_block" style="--row:1;--col:1;--color:#3a0ca3; animation: rglg_ani4 3s infinite"></div>
            <div class="rglg_block" style="--row:1;--col:2;--color:#7209b7; animation: rglg_ani5 3s infinite"></div>
            <div class="rglg_block" style="--row:2;--col:0;--color:#560bad; animation: rglg_ani6 3s infinite"></div>
            <div class="rglg_block" style="--row:2;--col:1;--color:#480ca8; animation: rglg_ani7 3s infinite"></div>
            <div class="rglg_block" style="--row:2;--col:2;--color:#3a0ca3; animation: rglg_ani8 3s infinite"></div>
        </div>
    </div>
</div>
</body>
</html>