小波Note

        <div>
    <div class="astral_1" />
    <div class="astral_2" />
    <div class="astral_3" />
    <div class="astral_4" />
    <div class="astral_5" />
</div>

    

        <style scoped lang="scss">

@use "sass:math";
@function getShadows($n) {
    $result: '#{random(100)}vw #{random(100)}vh 0 #fff';
    @for $i from 2 through floor($n) {
        $result: '#{$result}, #{random(100)}vw #{random(100)}vh 0 #fff';
    }
    @return unquote($result);
}

$duration: 600s;
$num: 1000;
@for $i from 1 through 5 {
    $duration: math.div($duration, 2);
    $num: math.div($num, 2);
    .astral_#{$i} {
        z-index: -1;
        position: fixed;
        top: 0;
        left: 0;
        width: #{$i}px;
        height: #{$i}px;
        border-radius: 50%;
        box-shadow: getShadows($num);
        animation: moveUp $duration linear infinite;
        &::after {
            content: '';
            position: absolute;
            top: 100vh;
            left: 0;
            width: inherit;
            height: inherit;
            border-radius: inherit;
            box-shadow: inherit;
        }
    }
}

@keyframes moveUp {
    to {
        transform: translateY(-100vh);
    }
}

</style>