@keyframes spin3D {
    from { transform: rotate3d(0.5, 0.5, 0.5, 360deg); }
    to { transform: rotate3d(0.5, 0.5, 0.5, 0deg); }
}

#loading {
    height: 100%;
    /* 关键修改：添加背景图片 */
    background-image: https://images.cnblogs.com/cnblogs_com/blogs/856984/galleries/2483724/t_251121094424_e1b259634e607501fe7db1e76830f7fe.jpg;
    background-size: cover; /* 让图片覆盖整个容器 */
    background-position: center; /* 将图片居中显示 */
    background-repeat: no-repeat; /* 不重复显示图片 */
    
    /* 可选：添加一个半透明的遮罩层，让动画更清晰 */
    background-color: rgba(29, 38, 48, 0.8); /* 原始的深灰色，带有 80% 的透明度 */
    background-blend-mode: overlay; /* 将背景色和背景图混合叠加 */
    
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: 99999999;
}

.spinner-box {
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
}

.leo {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.blue-orbit {
    width: 165px;
    height: 165px;
    border: 1px solid #91daffa5;
    animation: spin3D 3s linear .2s infinite;
}

.green-orbit {
    width: 120px;
    height: 120px;
    border: 1px solid #91ffbfa5;
    animation: spin3D 2s linear 0s infinite;
}

.red-orbit {
    width: 90px;
    height: 90px;
    border: 1px solid #ffca91a5;
    animation: spin3D 1s linear 0s infinite;
}

.white-orbit {
    width: 60px;
    height: 60px;
    border: 2px solid #fff;
    animation: spin3D 10s linear 0s infinite;
}

.w1 { transform: rotate3D(1, 1, 1, 90deg); }
.w2 { transform: rotate3D(1, 2, 0.5, 90deg); }
.w3 { transform: rotate3D(0.5, 1, 2, 90deg); }