/*这是背景，持续两秒*/
body:before{
    content:"";
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:auto;
    height:100vh;
    background:#fff;
    z-index:999;
    animation-name:bg;
    animation-duration:2s;
    animation-timing-function:ease;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
}
@keyframes bg{
    0%{
        height:100vh;
    }
    80%{
        height:100vh;
    }
    100%{
        height:0vh;
        display:none;
    }
}
/*这是前面的动画效果*/
body:after{
    content:"";
    position:fixed;
    top:0;
    left:0;
    right:auto;
    bottom:auto;
    height:1vh;
    background:#6cf;
    z-index:1000;
    animation-name:animate;
    animation-duration:1.6s;
    animation-timing-function:ease;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
}
@keyframes animate{
    0%{
    	width:0vw;
    }
    50%{
    	width:50vw;
    }
    80%{
    	width:50vw;
    }
    95%{
    	width:100vw;
    	height:1vh;
    }
    100%{
    	width:100vw;
    	height:0vh;
    }
}