#cnblogs_loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.98); display: flex; justify-content: center; align-items: center; z-index: 9999; flex-direction: column; transition: opacity 0.5s ease, visibility 0.5s ease; } #cnblogs_loader.hidden { opacity: 0; visibility: hidden; } .cnblogs-text-loader { font-size: 2.2rem; font-weight: 600; color: #2d6187; letter-spacing: 2px; margin-bottom: 20px; font-family: 'Microsoft YaHei', sans-serif; } .cnblogs-loading-bar { height: 3px; width: 200px; background: linear-gradient(to right, transparent, #4ecdc4, transparent); margin: 0 auto; position: relative; overflow: hidden; } .cnblogs-loading-bar::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: #4ecdc4; animation: cnblogs-loading 1.8s ease-in-out infinite; } @keyframes cnblogs-loading { 0% { left: -50%; } 100% { left: 150%; } } /* 响应式设计 */ @media (max-width: 768px) { .cnblogs-text-loader { font-size: 1.8rem; } .cnblogs-loading-bar { width: 180px; } }
@keyframes spin3D {
    from {
        transform: rotate3d(0.5, 0.5, 0.5, 360deg);
    }
    to {
        transform: rotate3d(0deg);
    }
}
#loading {
    height: 100%;
    background-color: #1d2630;
    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 0.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);
}