scss to achieve starry sky effect

Let’s look at the gif image first. To achieve this effect, you can use js or css to write it, but it’s very disgusting.
The implementation method this time is written in sass. For tutorials on using sass, you can see the official website: sass Chinese website

First, we need to introduce the sass library to automatically compile it into css for us.
Here is an example using the starry sky:

The HTML code is very simple, just four divs with different speeds, different sizes, wireless scrolling, and a background image.

    <div class="layer1"></div>
    <div class="layer2"></div>
    <div class="layer3"></div>
    <div class="layer4"></div>
    <div class="banner"></div>

sass code

//首先定义背景
.banner {
    
    
    background-color: rgba(0, 0, 0, 0.8509803922);
    height: 100vh;
    width: 100%;
}
//定义星空背景用shadow来循环生成
@function getShadows($n) {
    
    
    $Shadows :'#{random(100)}vw #{random(100)}vh #fff';

    @for $i from 2 to $n {
    
    
        $Shadows :'#{$Shadows}, #{random(100)}vw #{random(100)}vh #fff';
    }

    @return unquote($Shadows)
}

$duration :500s; //滚动时间
$count :500; //星空的数量
//循环生成星空，layer1到layer4
@for $i from 1 to 5 {
    
    
    $duration: floor($duration/2);
    $count: floor($count/2);

    .layer#{
    
    $i} {
    
    
        $size:#{
    
    $i}px;
        position: fixed;
        width: $size;
        height: $size;
        background-color: rgba(0, 0, 0, 0.032);
        border-radius: 50%;
        top: 0;
        left: 0;
        box-shadow: getShadows($count);
        animation: moveUp $duration linear infinite;

        &::after {
    
    
            content: '';
            position: fixed;
            left: 0;
            top: -100vh;
            border-radius: inherit;
            box-shadow: inherit;
            width: $size;
            height: $size;
        }
    }
}
//滚动的动画，无限像Y轴滚动，
@keyframes moveUp {
    
    
    100% {
    
    
        transform: translateY(100vh);
    }
}

The code for the moon is very simple,

The code of Meteor is similar to Starry Sky but not exactly the same. It requires some thinking. You can ask me for the source code via private message~~