用sass画个星空玩玩

先看看成品

Licecap录制动图总有点卡，将就着看看

原理

这种有远近效果星空的效果，实际上是由多层DIV重叠来制作的，只要每层Div所生成的星星的大小不同，那么在人眼看来，就有一种远小近大的效果

实现

先写个基础代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>星空 - sass版</title>
    <link rel="stylesheet" href="index.css"/>
</head>

<style>
*{
  margin: 0;
  padding: 0;
}

.main{
  width: 100%;
  height: 100vh;
  background: black;
}
<style/>

<body>
  <div class="main">
    <div class="layout1"></div>
    <div class="layout2"></div>
    <div class="layout3"></div>
    <div class="title">星空</div>
  </div>
</body>
</html>

其中的layoutxx就是星星的容器。

接下来就是如何生成星星，从成品图可以看到，现在的星星其实就是一个圆形，那实现一个圆这么简单就不用说了，重点是如何生成多个位置不同的圆，这里使用了阴影box-shadow来实现这种效果。

制作星空

先看看基础的layout是怎么样的，由于我们是使用了阴影来制作圆。所以layout的大小就是星星的大小，直接上代码。下面的代码都是使用了sass的

scss 复制代码

.layout1{
  $size:30px;
  position: fixed;
  top: 0;
  left: 0;
  width: $size;
  height: $size;
  background: red;
  border-radius: 50%;
}

这个时候应该是这样的

然后给layout设置一下阴影box-shadow:30vw 30vh #ffffff;

可以看到这个时候就在x:30vw,y:30vh的地方生成了一个白色的圆，那接下来就直接让它在随机的位置生成就可以了。

这个时候就要使用sass的函数来帮助我们生成多个圆，然后利用random函数来随机设置他们的位置

scss 复制代码

// 拿来生成星星的函数
@function generateAstral($n){
  $astrals:'#{random(100)}vw #{random(100)}vh #ffffff';

  @for $i from 2 through $n{
    $astrals: '#{$astrals}, #{random(100)}vw #{random(100)}vh #ffffff';
  }

  @return unquote($astrals) ;
}

.layout1{
    ...
    // 生成300个圆
    box-shadow: generateAstral(300);
}

效果

这样一层星星就设置好了。接下来就是把所有的layout弄成不同的大小，然后按这种方式来生成即可。这里同样利用sass的方法来生成

scss 复制代码

@for $i from 1 through 3{
  .layout#{$i}{
    // 直接使用i来做大小 
    $size:#{$i}px;
    position: fixed;
    top: 0;
    left: 0;
    width: $size;
    height: $size;
    background: red;
    border-radius: 50%;
    box-shadow: generateAstral(300);
  }
}

弄完变成这样

看起来有模有样了，但是还差点东西。我们是要动起来的星空，所以还需要给他设置上动画效果，那这里需要注意一下，从成品图里面可以看见星空是往一个方向移动的，那当动画执行完成之后，由于div往上面移动了，就会导致页面空白了一片，要先解决一下这个，解决方案也很简单，直接在layout的下面拼接上一个一模一样的div不就可以了。

scss 复制代码

@for $i from 1 through 3{
  .layout#{$i}{
    $size:#{$i}px;
    position: fixed;
    top: 0;
    left: 0;
    width: $size;
    height: $size;
    background: red;
    border-radius: 50%;
    box-shadow: generateAstral(300);
    // 设置动画
    animation: moveUp 10s linear infinite;
    // 往下面拼接一个div，注意这个div要跟原来的一模一样
    &:after{
      content:" ";
      width: inherit;
      height: inherit;
      position: fixed;
      top: 100vh;
      left: 0;
      box-shadow: inherit;
      border-radius: inherit;
    }
  }
}

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

到这里就完了。完整代码：

scss 复制代码

*{
  margin: 0;
  padding: 0;
}

.main{
  width: 100%;
  height: 100vh;
  background: black;
}

@function generateAstral($n){
  $astrals:'#{random(100)}vw #{random(100)}vh #ffffff';

  @for $i from 2 through $n{
    $astrals: '#{$astrals}, #{random(100)}vw #{random(100)}vh #ffffff';
  }

  @return unquote($astrals) ;
}

@for $i from 1 through 3{
  .layout#{$i}{
    $size:#{$i}px;
    position: fixed;
    top: 0;
    left: 0;
    width: $size;
    height: $size;
    background: red;
    border-radius: 50%;
    box-shadow: generateAstral(300);
    animation: moveUp 10s linear infinite;
    &:after{
      content:" ";
      width: inherit;
      height: inherit;
      position: fixed;
      top: 100vh;
      left: 0;
      box-shadow: inherit;
      border-radius: inherit;
    }
  }
}



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

.title{
  position: absolute;
  width: max-content;
  height: max-content;
  color: #ffffff;
  font-size: 36px;
  font-weight: bold;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin:auto;
}