sass星空

<template>
    <div class="layer1"></div>
    <div class="layer2"></div>
    <div class="layer3"></div>
    <div class="layer4"></div>
    <div class="layer5"></div>
</template>

<style scoped lang="scss">
    @function getShadows($n) {
        $shadows: '#{random(100)}vw #{random(100)}vh #f40';
        @for $i from 2 through $n {
            $shadows: '#{$shadows}, #{random(100)}vw #{random($limit: 100)}vh #f40'
        }

        @return unquote($shadows);
    }
    $duration: 1000s;
    $count: 1000;
    @for $i from 1 through 5 {
       $duration:floor(calc($duration / 2));
       $count: floor(calc($count / 2));
        .layer#{$i} {
        position: fixed;
        $size: #{$i}px;
        width: $size;
        height: $size;
        border-radius: 50%;
        background: #f40;
        box-shadow: getShadows($count);
        animation: moveup $duration linear infinite;

        &::after{
            content: '';
            position: fixed;
            width: inherit;
            height: inherit;
            left: 0;
            top: 100vh;
            box-shadow: inherit;
            border-radius: inherit;
            }
        }
    }

    @keyframes moveup {
        to {
            transform: translateY(-100vh);
        }
    }
</style>