/*页面背景控制*/
#splash-screen-animation-container{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f3e8dc;
    display: flex;
    flex-direction: column;/*元素垂直堆叠*/
    justify-content: center;
    align-items: center;
    z-index: 999;

    opacity: 1;
    transition: opacity 0.5s ease-out
}

/*图片容器控制*/
#splash-top-img-container{
    position: absolute;
    display: flex;
    top: -3%;
    left: 42% !important;/*为了抵消前面要求元素垂直堆叠，这是应许婉玥要求进行的维护改动*/
    height: auto;
    width: 30%;
    margin: 20px 0;
    animation: up-and-down 2s ease-in-out infinite;
}
#splash-bottom-img-container{
    bottom: -5%;
    width: 18%;
    height: auto;
    position: relative;
}
#splash-spinning-img-container{
    position: relative;
    aspect-ratio: 1/1;
    height: 40%;
    display: flex;
    justify-content:center;
    align-items: center;
    animation: container-group-rotate infinite 3s linear;
}

/*图片控制*/
#splash-top-img-container img,#splash-bottom-img-container img{
    width: 100%;
    height: 100%;
}
.splash-screen-spinning-imgs{
    position: absolute;
    width: 25%;
    height: auto;
    animation: counter-rotate infinite 3s linear;
}
#splash-spinning-img1{
    top: 7%;
    left: 40%;        
}
#splash-spinning-img2{
    bottom: 7% ;
    right: 7%;
}
#splash-spinning-img3{
    bottom: 7%;
    left: 7%;
}

/*动画控制*/
@keyframes up-and-down{
    0%,100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(20px);
    }
}
@keyframes container-group-rotate{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
@keyframes counter-rotate{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(-360deg);
    }
}

/*播放动画时先屏蔽内容*/
#splash-content-wrapper{
    display: none;
}