.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.image-container {
    width: 300px;
    height: 300px;
    position: relative;
}

.img_1, .img_2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 50% 100%;
    height: 100px;
    will-change: transform; 
}
.img_1 {
    /* 让 img_1 显示在 img_2 之上 */
    z-index: 9999; 
}

.img_2 {
    /* 让 img_2 显示在 img_1 之下 */
    z-index: 9998; 
}
#image1 {
    animation: combined1 3s linear infinite;
}

#image2 {
    animation: combined2 3s linear infinite;
}

#image3 {
    animation: combined3 3s linear infinite;
}

#image4 {
    animation: combined4 3s linear infinite;
}

#image5 {
    animation: combined5 3s linear infinite;
}

#image6 {
    animation: combined6 3s linear infinite;
}
@keyframes combined1 {

    /* 1 0.8 0 0 0 0 0 0.8 1 1 1 1 1 1 1 1 1  */
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(0);
    }

    6.25% {
        transform: translate(-50%, -50%) rotate(22.5deg) scale(0.8);
    }

    12.5% {
        transform: translate(-50%, -50%) rotate(45deg) scale(1);
    }

    18.75% {
        transform: translate(-50%, -50%) rotate(67.5deg) scale(1);
    }

    25% {
        transform: translate(-50%, -50%) rotate(90deg) scale(1);
    }

    31.25% {
        transform: translate(-50%, -50%) rotate(112.5deg) scale(1);
    }

    37.5% {
        transform: translate(-50%, -50%) rotate(135deg) scale(1);
    }

    43.75% {
        transform: translate(-50%, -50%) rotate(157.5deg) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) rotate(180deg) scale(1);
    }

    56.25% {
        transform: translate(-50%, -50%) rotate(202.5deg) scale(1);
    }

    62.5% {
        transform: translate(-50%, -50%) rotate(225deg) scale(1);
    }

    68.75% {
        transform: translate(-50%, -50%) rotate(247.5deg) scale(0.8);
    }

    75% {
        transform: translate(-50%, -50%) rotate(270deg) scale(0);
    }

    81.25% {
        transform: translate(-50%, -50%) rotate(292.5deg) scale(0);
    }

    87.5% {
        transform: translate(-50%, -50%) rotate(315deg) scale(0);
    }

    93.75% {
        transform: translate(-50%, -50%) rotate(337.5deg) scale(0);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg) scale(0);
    }
}

@keyframes combined2 {
    0% {
        transform: translate(-50%, -50%) rotate(60deg) scale(0);
    }

    6.25% {
        transform: translate(-50%, -50%) rotate(82.5deg) scale(0);
    }

    12.5% {
        transform: translate(-50%, -50%) rotate(105deg) scale(0.8);
    }

    18.75% {
        transform: translate(-50%, -50%) rotate(127.5deg) scale(1);
    }

    25% {
        transform: translate(-50%, -50%) rotate(150deg) scale(1);
    }

    31.25% {
        transform: translate(-50%, -50%) rotate(172.5deg) scale(1);
    }

    37.5% {
        transform: translate(-50%, -50%) rotate(195deg) scale(1);
    }

    43.75% {
        transform: translate(-50%, -50%) rotate(217.5deg) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) rotate(240deg) scale(1);
    }

    56.25% {
        transform: translate(-50%, -50%) rotate(262.5deg) scale(1);
    }

    62.5% {
        transform: translate(-50%, -50%) rotate(285deg) scale(1);
    }

    68.75% {
        transform: translate(-50%, -50%) rotate(307.5deg) scale(1);
    }

    75% {
        transform: translate(-50%, -50%) rotate(330deg) scale(0.8);
    }

    81.25% {
        transform: translate(-50%, -50%) rotate(352.5deg) scale(0);
    }

    87.5% {
        transform: translate(-50%, -50%) rotate(375deg) scale(0);
    }

    93.75% {
        transform: translate(-50%, -50%) rotate(397.5deg) scale(0);
    }

    100% {
        transform: translate(-50%, -50%) rotate(420deg) scale(0);
    }
}

@keyframes combined3 {
    0% {
        transform: translate(-50%, -50%) rotate(120deg) scale(0);
    }

    6.25% {
        transform: translate(-50%, -50%) rotate(142.5deg) scale(0);
    }

    12.5% {
        transform: translate(-50%, -50%) rotate(165deg) scale(0);
    }

    18.75% {
        transform: translate(-50%, -50%) rotate(187.5deg) scale(0.8);
    }

    25% {
        transform: translate(-50%, -50%) rotate(210deg) scale(1);
    }

    31.25% {
        transform: translate(-50%, -50%) rotate(232.5deg) scale(1);
    }

    37.5% {
        transform: translate(-50%, -50%) rotate(255deg) scale(1);
    }

    43.75% {
        transform: translate(-50%, -50%) rotate(277.5deg) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) rotate(300deg) scale(1);
    }

    56.25% {
        transform: translate(-50%, -50%) rotate(322.5deg) scale(1);
    }

    62.5% {
        transform: translate(-50%, -50%) rotate(345deg) scale(1);
    }

    68.75% {
        transform: translate(-50%, -50%) rotate(367.5deg) scale(1);
    }

    75% {
        transform: translate(-50%, -50%) rotate(390deg) scale(1);
    }

    81.25% {
        transform: translate(-50%, -50%) rotate(412.5deg) scale(0.8);
    }

    87.5% {
        transform: translate(-50%, -50%) rotate(435deg) scale(0);
    }

    93.75% {
        transform: translate(-50%, -50%) rotate(457.5deg) scale(0);
    }

    100% {
        transform: translate(-50%, -50%) rotate(480deg) scale(0);
    }
}

@keyframes combined4 {
    0% {
        transform: translate(-50%, -50%) rotate(180deg) scale(0);
    }

    6.25% {
        transform: translate(-50%, -50%) rotate(202.5deg) scale(0);
    }

    12.5% {
        transform: translate(-50%, -50%) rotate(225deg) scale(0);
    }

    18.75% {
        transform: translate(-50%, -50%) rotate(247.5deg) scale(0);
    }

    25% {
        transform: translate(-50%, -50%) rotate(270deg) scale(0.8);
    }

    31.25% {
        transform: translate(-50%, -50%) rotate(292.5deg) scale(1);
    }

    37.5% {
        transform: translate(-50%, -50%) rotate(315deg) scale(1);
    }

    43.75% {
        transform: translate(-50%, -50%) rotate(337.5deg) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) rotate(360deg) scale(1);
    }

    56.25% {
        transform: translate(-50%, -50%) rotate(382.5deg) scale(1);
    }

    62.5% {
        transform: translate(-50%, -50%) rotate(405deg) scale(1);
    }

    68.75% {
        transform: translate(-50%, -50%) rotate(427.5deg) scale(1);
    }

    75% {
        transform: translate(-50%, -50%) rotate(450deg) scale(1);
    }

    81.25% {
        transform: translate(-50%, -50%) rotate(472.5deg) scale(1);
    }

    87.5% {
        transform: translate(-50%, -50%) rotate(495deg) scale(0.8);
    }

    93.75% {
        transform: translate(-50%, -50%) rotate(517.5deg) scale(0);
    }

    100% {
        transform: translate(-50%, -50%) rotate(540deg) scale(0);
    }
}

@keyframes combined5 {
    0% {
        transform: translate(-50%, -50%) rotate(240deg) scale(0);
    }

    6.25% {
        transform: translate(-50%, -50%) rotate(262.5deg) scale(0);
    }

    12.5% {
        transform: translate(-50%, -50%) rotate(285deg) scale(0);
    }

    18.75% {
        transform: translate(-50%, -50%) rotate(307.5deg) scale(0);
    }

    25% {
        transform: translate(-50%, -50%) rotate(330deg) scale(0);
    }

    31.25% {
        transform: translate(-50%, -50%) rotate(352.5deg) scale(0.8);
    }

    37.5% {
        transform: translate(-50%, -50%) rotate(375deg) scale(1);
    }

    43.75% {
        transform: translate(-50%, -50%) rotate(397.5deg) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) rotate(420deg) scale(1);
    }

    56.25% {
        transform: translate(-50%, -50%) rotate(442.5deg) scale(1);
    }

    62.5% {
        transform: translate(-50%, -50%) rotate(465deg) scale(1);
    }

    68.75% {
        transform: translate(-50%, -50%) rotate(487.5deg) scale(1);
    }

    75% {
        transform: translate(-50%, -50%) rotate(510deg) scale(1);
    }

    81.25% {
        transform: translate(-50%, -50%) rotate(532.5deg) scale(1);
    }

    87.5% {
        transform: translate(-50%, -50%) rotate(555deg) scale(1);
    }

    93.75% {
        transform: translate(-50%, -50%) rotate(577.5deg) scale(0.8);
    }

    100% {
        transform: translate(-50%, -50%) rotate(600deg) scale(0);
    }
}

@keyframes combined6 {
    0% {
        transform: translate(-50%, -50%) rotate(300deg) scale(0);
    }

    6.25% {
        transform: translate(-50%, -50%) rotate(322.5deg) scale(0);
    }

    12.5% {
        transform: translate(-50%, -50%) rotate(345deg) scale(0);
    }

    18.75% {
        transform: translate(-50%, -50%) rotate(367.5deg) scale(0);
    }

    25% {
        transform: translate(-50%, -50%) rotate(390deg) scale(0);
    }

    31.25% {
        transform: translate(-50%, -50%) rotate(412.5deg) scale(0);
    }

    37.5% {
        transform: translate(-50%, -50%) rotate(435deg) scale(0.8);
    }

    43.75% {
        transform: translate(-50%, -50%) rotate(457.5deg) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) rotate(480deg) scale(1);
    }

    56.25% {
        transform: translate(-50%, -50%) rotate(502.5deg) scale(1);
    }

    62.5% {
        transform: translate(-50%, -50%) rotate(525deg) scale(1);
    }

    68.75% {
        transform: translate(-50%, -50%) rotate(547.5deg) scale(1);
    }

    75% {
        transform: translate(-50%, -50%) rotate(570deg) scale(1);
    }

    81.25% {
        transform: translate(-50%, -50%) rotate(592.5deg) scale(1);
    }

    87.5% {
        transform: translate(-50%, -50%) rotate(615deg) scale(1);
    }

    93.75% {
        transform: translate(-50%, -50%) rotate(637.5deg) scale(1);
    }

    100% {
        transform: translate(-50%, -50%) rotate(660deg) scale(0.8);
    }
}

.loading-text {
    margin-top: 10px;
    text-align: center;
    width: auto;
}

.dot-1, .dot-2, .dot-3 {
    opacity: 0; /* 默认隐藏 */
    transform: translateY(0);
}

/* 定义动画 */
@keyframes dot-1-anim {
    0%, 100% {
        opacity: 0;
        transform: translateY(0);
    }
    5% {
        opacity: 1;
        transform: translateY(-15px); /* 向上跳动 */
    }
    10%, 90% {
        opacity: 1;
        transform: translateY(0); /* 静止不动 */
    }
}

@keyframes dot-2-anim {
    0%, 30%, 100% {
        opacity: 0;
        transform: translateY(0);
    }
    35% {
        opacity: 1;
        transform: translateY(-15px); /* 向上跳动 */
    }
    40%, 90% {
        opacity: 1;
        transform: translateY(0); /* 静止不动 */
    }
}

@keyframes dot-3-anim {
    0%, 60%, 100% {
        opacity: 0;
        transform: translateY(0);
    }
    65% {
        opacity: 1;
        transform: translateY(-15px); /* 向上跳动 */
    }
    70%, 90% {
        opacity: 1;
        transform: translateY(0); /* 静止不动 */
    }
}

.dot-1 {
    animation: dot-1-anim 1.5s ease-in-out infinite normal;
}

.dot-2 {
    animation: dot-2-anim 1.5s ease-in-out infinite normal;
}

.dot-3 {
    animation: dot-3-anim 1.5s ease-in-out infinite normal;
}