<!--十个小正方形-->
.next_page{
    width: 96%;
    height: 80%;
}
.next_page span{
    position: absolute;
    width: 80px;
    height: 80px;
    
} 
.next_page span:nth-child(1){
    top:50%;
    left: 50%;
    background-color: #be97d4;
    animation: animate 10s linear infinite;
}
.next_page span:nth-child(2){
    top:5%;
    left: 5%;
    background-color: #dcecf0;
    animation: animate 5s linear infinite;
}
.next_page span:nth-child(3){
    top:20%;
    left: 25%;
    background-color: #be97d4;
    animation: animate 10s linear infinite;
}
.next_page span:nth-child(4){
    top:40%;
    left: 15%;
    background-color: #dfcaad;
    animation: animate 15s linear infinite;
}
.next_page span:nth-child(5){
    top:70%;
    left: 25%;
    background-color: #be97d4;
    animation: animate 9s linear infinite;
}
.next_page span:nth-child(6){
    top:10%;
    left: 70%;
    background-color: #b87cda;
    animation: animate 10s linear infinite;
}
.next_page span:nth-child(7){
    top:30%;
    left: 80%;
    background-color: #b87cda;
    animation: animate 10s linear infinite;
}
.next_page span:nth-child(8){
    top:70%;
    left: 60%;
    background-color: #c4e9f3;
    animation: animate 12s linear infinite;
}
@keyframes animate{
    0%{
        transform: scale(0) translateY(0) rotate(0deg);
        opacity: 1;
    }
    100%{
        transform: scale(1) translateY(100px) rotate(360deg);
        opacity: 0;
    }