页面加载特效 partthree

<div class="loading">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

body,html{
    width:100%;
    height:100%;
    background-color:
}
.loading{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%) rotate(45deg);
    width:100px;
    height:100px;
    animation:scale 2s linear infinite;
}
span{
    position: absolute;
    width:50px;
    height:50px;
    background-color:#f6b93b;
    animation:rotate 2s linear infinite;
}
span:nth-child(1){
    top:0;
    left:0;
    background-color:#FFEBEE;
}
span:nth-child(2){
    top:0;
    right:0;
    background-color:#EF9A9A;
}
span:nth-child(3){
    bottom:0;
    left:0;
    background-color:#FFCA28;
}
span:nth-child(4){
    bottom:0;
    right:0;
    background-color:#079992;
}
@keyframes scale{
    0%{
        width:100px;
        height:100px;
    }
    10%{
        width:100px;
        height:100px;
    }
    50%{
        width:150px;
        height:150px;
    }
    90%{
        width:100px;
        height:100px;
    }
    100%{
        width:100px;
        height:100px;
    }

}
@keyframes rotate{
    0%{
        transform: rotate(0deg)
    }
    50%{
        transform: rotate(90deg)
    }
    90%{
        transform: rotate(0deg)
    }
    100%{
        transform: rotate(0deg)
    }

}