* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body {
    background-color: #fff8ff;
    width:100%;
    overflow-x:hidden;
}

.loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-30%) translateY(-50%);
}

.loading-1 {
    width: 120px;
    left:0;
    animation: cut-ani-1 2s ease-in-out infinite alternate;
}
.loading-2 {
    width: 118px;
    right:0;
    transform: translateY(-39px);
    animation: cut-ani-2 2s ease-in-out infinite alternate;
}
.loading-3 {
    width: 84.5px;
    left: 0;
    transform: translateY(-82px);
}
.loading-4 {
    width: 103px;
    right:0;
    transform: translateY(-114px) translateX(13px);
}
/*展开合上的效果*/
@keyframes cut-ani-1 {
    from {
            transform: translateY(-20px);
    }
    to {
            transform: translateY(0px);
    }
}
@keyframes cut-ani-2 {
    from {
            transform: translateY(-59px);
    }
    to {
            transform: translateY(-39px);
    }
}
/*我实在不知道怎么让省略号依次出现！！！*/
.dot-1 {
    animation: appear-ani-1 1.5s ease-in-out infinite normal;
}
.dot-2 {
    animation: appear-ani-2 1.5s ease-in-out infinite normal;
}
.dot-3 {
    animation: appear-ani-3 1.5s ease-in-out infinite normal;
}

@keyframes appear-ani-1 {
    0% {
        opacity: 0%
    }
    25% {
        opacity: 100%
    }
    50% {
        opacity: 100%
    }
    75% {
        opacity: 100%
    }
    100% {
        opacity: 100%
    }
}
@keyframes appear-ani-2 {
    0% {
        opacity: 0%
    }
    25% {
        opacity: 0%
    }
    50% {
        opacity: 100%
    }
    75% {
        opacity: 100%
    }
    100% {
        opacity: 100%
    }
}
@keyframes appear-ani-3 {
    0% {
        opacity: 0%
    }
    25% {
        opacity: 0%
    }
    50% {
        opacity: 0%
    }
    75% {
        opacity: 100%
    }
    100% {
        opacity: 100%
    }
}

/*R阴影样式
.R-shadow {
    position: absolute;
    left: -50px;
    top: 150px;
    fill: #c696ff;
    filter: blur(30px); 
    animation: shadow-ani 2s ease-in-out infinite alternate;
}
*/
/*R整体的漂浮动画*/
.loading-svg {
    filter: drop-shadow(0px 0px 2px #ffb2ff);
    animation: floating-R 2s ease-in-out infinite alternate;
}


@keyframes floating-R {
    from {
        transform: translateY(30px);
    }
    to {
        transform: translateY(0);
    }
    
}
/*阴影动态
@keyframes shadow-ani {
    from {
        transform: scale(0.6);
        opacity: 50%;
    }
    to {
        transform: scale(0.3);
        opacity: 30%;
    }
}
*/
/*文本样式*/
.loading-text {
    transform: translateX(-50px) translateY(-70px);
    color: linear-gradient(to left, #c696ff 0%, #fb96ff 50%, #ffa3d7 100%);
    font-weight: 600;
    font-family:'Montserrat';
}