body {
    background: #000;
    /*background-repeat: no-repeat;*/
    /*background-size: 100vw  100vh;*/
    background-size: cover;
}
/*
 * *Created by PoLeung
 * *Email 30930572@qq.com
 * *Create date 2020-08-15
 * *Copyright LockDataV
 * *Data visualization project based on Echarts.js.
 */
:root {
    --primary-color: hsl(196, 78%, 61%);
    --secondary-color: hsl(217, 15%, 83%);
    --success-color: hsl(165, 58%, 55%);
    --info-color: hsl(214, 79%, 65%);
    --warning-color: hsl(43, 100%, 66%);
    --danger-color: hsl(354, 81%, 63%);
    --primary-color-darker: hsl(196, 68%, 54%);
    --secondary-color-darker: hsl(215, 13%, 70%);
    --success-color-darker: hsl(165, 55%, 48%);
    --info-color-darker: hsl(214, 68%, 58%);
    --warning-color-darker: hsl(39, 97%, 62%);
    --danger-color-darker: hsl(354, 67%, 56%);
    --primary-color-lighter: hsl(196, 78%, 81%);
    --secondary-color-lighter: hsl(214, 16%, 92%);
    --success-color-lighter: hsl(165, 58%, 75%);
    --info-color-lighter: hsl(214, 79%, 85%);
    --warning-color-lighter: hsl(43, 100%, 86%);
    --danger-color-lighter: hsl(354, 81%, 83%);
    --secondary-color-darkest: hsl(215, 11%, 30%);
    --secondary-color-lightest: hsl(220, 1%, 98%)
}

.stars {
    position: absolute;
    top: -500px;
    left: 300px;
    width: 90%;
    height: 100%;
    transform: rotate(90deg); /*初始旋转角度*/
    opacity: 0.6; /*过程透明度初始线条*/
    z-index: -999999;
}

.star {
    --star-color: var(--primary-color);
    --star-tail-length: 6em;
    --star-tail-height: 2px;
    --star-width: calc(var(--star-tail-length) / 6);
    --fall-duration: 9s;
    --tail-fade-duration: var(--fall-duration);
    position: absolute;
    top: var(--top-offset);
    left: 0;
    opacity: 0.02; /*初始透明度线条*/
    width: var(--star-tail-length);
    height: var(--star-tail-height);
    color: var(--star-color);
    background: linear-gradient(45deg, currentColor, transparent);
    border-radius: 50%;
    filter: drop-shadow(0 0 6px currentColor);
    transform: translate3d(104em, 0, 0);
    animation: fall var(--fall-duration) var(--fall-delay) linear infinite, tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite;
}

@media screen and (max-width: 750px) {
    .star {
        animation: fall var(--fall-duration) var(--fall-delay) linear infinite;
    }
}

.star:nth-child(1) {
    --star-tail-length: 6.07em;
    --top-offset: 18.71vh;
    --fall-duration: 6.295s;
    --fall-delay: 8.613s;
}

.star:nth-child(2) {
    --star-tail-length: 5.87em;
    --top-offset: 91.61vh;
    --fall-duration: 6.744s;
    --fall-delay: 5.299s;
}

.star:nth-child(3) {
    --star-tail-length: 7.01em;
    --top-offset: 66.77vh;
    --fall-duration: 7.356s;
    --fall-delay: 8.793s;
}

.star:nth-child(4) {
    --star-tail-length: 5.54em;
    --top-offset: 3.44vh;
    --fall-duration: 11.193s;
    --fall-delay: 7.602s;
}

.star:nth-child(5) {
    --star-tail-length: 7.37em;
    --top-offset: 30.74vh;
    --fall-duration: 7.323s;
    --fall-delay: 5.879s;
}

.star:nth-child(6) {
    --star-tail-length: 5.74em;
    --top-offset: 96.44vh;
    --fall-duration: 6.375s;
    --fall-delay: 6.784s;
}

.star:nth-child(7) {
    --star-tail-length: 6.75em;
    --top-offset: 53.58vh;
    --fall-duration: 11.154s;
    --fall-delay: 2.304s;
}

.star:nth-child(8) {
    --star-tail-length: 6.93em;
    --top-offset: 45.4vh;
    --fall-duration: 9.916s;
    --fall-delay: 1.499s;
}

.star:nth-child(9) {
    --star-tail-length: 6.79em;
    --top-offset: 4.57vh;
    --fall-duration: 6.47s;
    --fall-delay: 3.746s;
}

.star:nth-child(10) {
    --star-tail-length: 7.16em;
    --top-offset: 87.24vh;
    --fall-duration: 10.807s;
    --fall-delay: 3.084s;
}

.star:nth-child(11) {
    --star-tail-length: 5.29em;
    --top-offset: 16.51vh;
    --fall-duration: 8.055s;
    --fall-delay: 1.882s;
}

.star:nth-child(12) {
    --star-tail-length: 5.48em;
    --top-offset: 88.17vh;
    --fall-duration: 6.439s;
    --fall-delay: 4.72s;
}

.star:nth-child(13) {
    --star-tail-length: 5.42em;
    --top-offset: 99.99vh;
    --fall-duration: 10.565s;
    --fall-delay: 9.969s;
}

.star:nth-child(14) {
    --star-tail-length: 6.45em;
    --top-offset: 66.41vh;
    --fall-duration: 6.242s;
    --fall-delay: 4.135s;
}

.star:nth-child(15) {
    --star-tail-length: 6.1em;
    --top-offset: 33.08vh;
    --fall-duration: 9.203s;
    --fall-delay: 5.222s;
}

.star:nth-child(16) {
    --star-tail-length: 5.31em;
    --top-offset: 71.71vh;
    --fall-duration: 8.738s;
    --fall-delay: 0.224s;
}

.star:nth-child(17) {
    --star-tail-length: 5.18em;
    --top-offset: 96.06vh;
    --fall-duration: 11.629s;
    --fall-delay: 4.021s;
}

.star:nth-child(18) {
    --star-tail-length: 6.82em;
    --top-offset: 79.65vh;
    --fall-duration: 6.07s;
    --fall-delay: 0.699s;
}

.star:nth-child(19) {
    --star-tail-length: 7.45em;
    --top-offset: 50.02vh;
    --fall-duration: 9.895s;
    --fall-delay: 5.542s;
}

.star:nth-child(20) {
    --star-tail-length: 5.29em;
    --top-offset: 81.84vh;
    --fall-duration: 6.928s;
    --fall-delay: 2.042s;
}

.star:nth-child(21) {
    --star-tail-length: 5.99em;
    --top-offset: 42.27vh;
    --fall-duration: 7.946s;
    --fall-delay: 4.317s;
}

.star:nth-child(22) {
    --star-tail-length: 6.49em;
    --top-offset: 0.55vh;
    --fall-duration: 10.794s;
    --fall-delay: 9.025s;
}

.star:nth-child(23) {
    --star-tail-length: 6.42em;
    --top-offset: 42vh;
    --fall-duration: 8.135s;
    --fall-delay: 6.336s;
}

.star:nth-child(24) {
    --star-tail-length: 5.07em;
    --top-offset: 56.93vh;
    --fall-duration: 11.157s;
    --fall-delay: 2.912s;
}

.star:nth-child(25) {
    --star-tail-length: 6.56em;
    --top-offset: 65.69vh;
    --fall-duration: 9.641s;
    --fall-delay: 0.982s;
}

.star:nth-child(26) {
    --star-tail-length: 6.5em;
    --top-offset: 80.77vh;
    --fall-duration: 6.756s;
    --fall-delay: 5.443s;
}

.star:nth-child(27) {
    --star-tail-length: 6.01em;
    --top-offset: 30.77vh;
    --fall-duration: 7.305s;
    --fall-delay: 8.435s;
}

.star:nth-child(28) {
    --star-tail-length: 6.74em;
    --top-offset: 57.09vh;
    --fall-duration: 10.082s;
    --fall-delay: 9.389s;
}

.star:nth-child(29) {
    --star-tail-length: 6.09em;
    --top-offset: 65.11vh;
    --fall-duration: 6.587s;
    --fall-delay: 6.4s;
}

.star:nth-child(30) {
    --star-tail-length: 7.49em;
    --top-offset: 92.88vh;
    --fall-duration: 10.762s;
    --fall-delay: 2.241s;
}

.star:nth-child(31) {
    --star-tail-length: 5.77em;
    --top-offset: 97.66vh;
    --fall-duration: 10.42s;
    --fall-delay: 4.185s;
}

.star:nth-child(32) {
    --star-tail-length: 7.1em;
    --top-offset: 48.23vh;
    --fall-duration: 9.418s;
    --fall-delay: 0.79s;
}

.star:nth-child(33) {
    --star-tail-length: 5.06em;
    --top-offset: 70.09vh;
    --fall-duration: 6.436s;
    --fall-delay: 2.047s;
}

.star:nth-child(34) {
    --star-tail-length: 5.35em;
    --top-offset: 47.6vh;
    --fall-duration: 8.384s;
    --fall-delay: 4.431s;
}

.star:nth-child(35) {
    --star-tail-length: 6.5em;
    --top-offset: 35.5vh;
    --fall-duration: 9.579s;
    --fall-delay: 2.685s;
}

.star:nth-child(36) {
    --star-tail-length: 5.31em;
    --top-offset: 78.83vh;
    --fall-duration: 10.381s;
    --fall-delay: 0.631s;
}

.star:nth-child(37) {
    --star-tail-length: 7.45em;
    --top-offset: 75.7vh;
    --fall-duration: 6.924s;
    --fall-delay: 6.499s;
}

.star:nth-child(38) {
    --star-tail-length: 6.71em;
    --top-offset: 50.78vh;
    --fall-duration: 8.385s;
    --fall-delay: 6.098s;
}

.star:nth-child(39) {
    --star-tail-length: 5.03em;
    --top-offset: 36.46vh;
    --fall-duration: 9.385s;
    --fall-delay: 6.252s;
}

.star:nth-child(40) {
    --star-tail-length: 5.58em;
    --top-offset: 86.88vh;
    --fall-duration: 7.07s;
    --fall-delay: 0.626s;
}

.star:nth-child(41) {
    --star-tail-length: 5.75em;
    --top-offset: 16.67vh;
    --fall-duration: 8.02s;
    --fall-delay: 1.497s;
}

.star:nth-child(42) {
    --star-tail-length: 7.08em;
    --top-offset: 56.93vh;
    --fall-duration: 9.208s;
    --fall-delay: 5.358s;
}

.star:nth-child(43) {
    --star-tail-length: 5.6em;
    --top-offset: 73.67vh;
    --fall-duration: 6.207s;
    --fall-delay: 3.243s;
}

.star:nth-child(44) {
    --star-tail-length: 5.45em;
    --top-offset: 25.2vh;
    --fall-duration: 10.599s;
    --fall-delay: 8.583s;
}

.star:nth-child(45) {
    --star-tail-length: 7.14em;
    --top-offset: 56.77vh;
    --fall-duration: 11.523s;
    --fall-delay: 9.923s;
}

.star:nth-child(46) {
    --star-tail-length: 5.22em;
    --top-offset: 10.01vh;
    --fall-duration: 8.072s;
    --fall-delay: 0.293s;
}

.star:nth-child(47) {
    --star-tail-length: 7.44em;
    --top-offset: 87.25vh;
    --fall-duration: 9.226s;
    --fall-delay: 2.065s;
}

.star:nth-child(48) {
    --star-tail-length: 7.43em;
    --top-offset: 68.32vh;
    --fall-duration: 11.421s;
    --fall-delay: 7.182s;
}

.star:nth-child(49) {
    --star-tail-length: 5.68em;
    --top-offset: 56.42vh;
    --fall-duration: 9.508s;
    --fall-delay: 7.669s;
}

.star:nth-child(50) {
    --star-tail-length: 5.37em;
    --top-offset: 93.45vh;
    --fall-duration: 10.222s;
    --fall-delay: 4.175s;
}

.star::before, .star::after {
    position: absolute;
    content: '';
    top: 0;
    left: calc(var(--star-width) / -2);
    width: var(--star-width);
    height: 70%;
    background: linear-gradient(45deg, transparent, currentColor, transparent);
    border-radius: inherit;
    animation: blink 2s linear infinite;
}

.star::before {
    transform: rotate(45deg);
}

.star::after {
    transform: rotate(-45deg);
}

@keyframes fall {
    from {
        opacity: 0;
    }

    to {
        transform: translate3d(-30em, 0, 0);
    }
}

@keyframes tail-fade {
    0%, 50% {
        width: var(--star-tail-length);
        opacity: 1;
    }
    70%, 80% {
        width: 0;
        opacity: 0.6;
    }
    100% {
        width: 0;
        opacity: 0;
    }
}

@keyframes blink {
    0%, 50% {
        opacity: 0;
    }

    50% {
        opacity: 0.6;
    }
}