star {
    --星球颜色: #f9d2d3;
    display: block;
    font-size: 60vmin;
    position: fixed;
    width: 1em;
    height: 1em;
    z-index: 0;
    inset: 0;
    margin: auto;
    perspective: 3em;
    transform-style: preserve-3d;
    animation: 出现 1s;
    transition: 1s;
    z-index: -1;
}

star * {
    transform-style: preserve-3d;
}

sun {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: 绕Y轴旋转 20s linear infinite;
}

sun i {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--星球颜色);
    box-shadow: 0 0 .25em 0 var(--星球颜色);
    transform: rotateY(calc(var(--i) * 60deg));
}

flow {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: 旋转 50s linear infinite;
}

flow i {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid var(--星球颜色);
    animation: 绕Y轴旋转 10s linear infinite, flow 10s linear infinite backwards;
    animation-delay: calc(var(--i) * 3s - 3s);
}

@keyframes 绕Y轴旋转 {
    100% {
        transform: rotateY(360deg);
    }
}

@keyframes flow {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes 旋转 {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 359deg;
    }
}

@keyframes 出现 {
    from {
        opacity: 0;
        scale: 10;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}