/*--------------------------------------背景板--------------------------------------------*/
#background-animation
{
    position: absolute;
    box-sizing: border-box;
    padding: 2rem;
    /*border: 2rem solid red;*/
    width: 100%;
    height: 400vh;
    top: -150vh;
    left: 0;
}
/*--------------------------------------发光点-------------------------------------------*/
.dot_box{ position: absolute; }
.dot_main
{
    transform-origin: 30% 50%;
    position: absolute;
}

.border-style1 .dot_main{ aspect-ratio: 1.3;    border-radius: 95% 87% 100% 80% / 95% 93% 76% 91%;}
.border-style2 .dot_main{ aspect-ratio: 1;    border-radius: 51% 87% 100% 80% / 72% 67% 57% 91%;}
.border-style3 .dot_main{ aspect-ratio: 0.8;    border-radius: 100% 30% 40% 80% / 72% 95% 93% 91%;}

.bgc1 .dot_main{    background-image:linear-gradient(167deg,#2AFADF 10%,#4C83FF 100%);}
.bgc2 .dot_main{    background-image:linear-gradient(135deg,#90F7EC 15%,#32CCBC 100%);}
.bgc3 .dot_main{    background-image:linear-gradient(135deg,#92fe9d ,#00c9ff 100%);}
.pure_bgc .dot_main{background-color: #2AFADF;}

.animation1 .dot_main{  animation: dot_main_rotate1 3s infinite linear;}
.animation2 .dot_main{  animation: dot_main_rotate2 3.4s infinite linear;}
.animation3 .dot_main{  animation: dot_main_rotate3 3.9s infinite linear;}
.big_dot_animation .dot_main{animation: big_dot_main_rotate 3.2s infinite linear;}

/*四个中间的小点*/
#dot1 { top: 160vh;  left: 55vw; }
#dot2 { top: 200vh;  left: 40vw; }
#dot3 { top: 230vh;  left: 20vw; }
#dot4 { top: 210vh;  left: 80vw; }
/*四个上面的小点*/
#dot5 { top: 130vh;  left: 20vw; }
#dot6 { top: 120vh;  left: 40vw; }
#dot7 { top: 140vh;  left: 60vw; }
#dot8 { top: 110vh;  left: 80vw; }
/*四个下面的小点*/
#dot9 { top: 270vh;  left: 20vw; }
#dot10 { top: 250vh;  left: 40vw; }
#dot11 { top: 280vh;  left: 60vw; }
#dot12 { top: 160vh;  left: 80vw; }
/*两个左边的小点*/
#dot13 { top: 180vh;  left: -5vw; }
#dot14 { top: 220vh;  left: -10vw; }
/*一个右边的小点*/
#dot15 { top: 200vh;  left: 105vw; }
/*两个大点*/
#dot16 { top: 170vh;  left: 20vw; }
#dot17 { top: 220vh;  left: 75vw; }

@keyframes dot_main_rotate1 {
    0% {
        transform: rotate(0deg);
        filter: blur(0.6rem);
        height: 1rem;
    }

    50% {
        filter: blur(0.4rem);
        height: 1.5rem;
    }

    100% {
        transform: rotate(360deg);
        filter: blur(0.6rem);
        height: 1rem;
    }
}
@keyframes dot_main_rotate2 {
    0% {
        transform: rotate(0deg);
        filter: blur(0.3rem);
        height: 1.2rem;
    }

    50% {
        filter: blur(0.6rem);
        height: 0.8rem;
    }

    100% {
        transform: rotate(360deg);
        filter: blur(0.3rem);
        height: 1.2rem;
    }
}
@keyframes dot_main_rotate3 {
    0% {
        transform: rotate(0deg);
        filter: blur(0.2rem);
        height: 1.5rem;
    }

    50% {
        filter: blur(0.4rem);
        height: 1.7rem;
    }

    100% {
        transform: rotate(360deg);
        filter: blur(0.2rem);
        height: 1.5rem;
    }
}
@keyframes big_dot_main_rotate {
    0% {
        transform: rotate(0deg);
        background-color: #2AFADF;
        box-shadow: #2AFADF 0 0 2rem 1.5rem;
        height: 2.4rem;
    }

    50% {
        background-color: #92fe9d;
        box-shadow: #92fe9d 0 0 1.5rem 1rem;
        height: 2rem;
    }

    100% {
        transform: rotate(360deg);
        background-color: #2AFADF;
        box-shadow: #2AFADF 0 0 2rem 1.5rem;
        height: 2.4rem;
    }
}