用不到一百行的Scss代码，写一个星空背景

最新推荐文章于 2024-01-01 18:37:04 发布

a-big-yellow

最新推荐文章于 2024-01-01 18:37:04 发布

阅读量125

点赞数

文章标签： scss rust 前端

本文链接：https://blog.csdn.net/qq_45936165/article/details/134558051

版权

首先我们需要安装sass

npm i sass

然后准备静态结构

<div class="page">
    <div class="layer1"></div>
    <div class="layer2"></div>
    <div class="layer3"></div>
    <div class="layer4"></div>
    <div class="layer5"></div>
    <div class="title">sass星空</div>
</div>

然后将标题样式完成

.page {
    height: 100vh;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    overflow: hidden;
}

.title {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    color: #fff;
    text-align: center;
    font-family: 'lato', sans-serif;
    font-weight: 300;
    font-size: 50px;
    letter-spacing: 10px;
    margin-top: -60px;
    padding-left: 10px;
    background: linear-gradient(white,#38495a);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

最后将我们的星星样式完成

@function getShadows($n){
    $shadows: '#{random(100)}vw #{random(100)}vh #fff';
    @for $i from 2 through $n {
        $shadows: '#{$shadows},#{random(100)}vw #{random(100)}vh #fff';
    }
    @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);
    }
}

效果图如下：