scss实现星空效果

先看gif图，实现这种效果可以用js写也可以用css来写但是很恶心。
这次实现的方式是用的sass来写的，使用sass教程可以看官网 ：sass中文网

首先得引入sass库才能自动帮我们编译成css。
这里用星空来举个例子：

HTML代码很简单，就四个速度不同、大小不同、无线循环滚动的div和一个背景图

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

sass代码

//首先定义背景
.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);
    }
}

月亮的代码很简单，

流星的代码跟星空类似但不是完全相同，需要动动脑筋，可以私聊找我要源码哦~~