用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;
}
相关推荐
RadiumAg3 分钟前
记一道有趣的面试题
前端·javascript
yangzhi_emo7 分钟前
ES6笔记2
开发语言·前端·javascript
yanlele23 分钟前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子2 小时前
React状态管理最佳实践
前端
烛阴2 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子2 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...2 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情2 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz2 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
天天扭码3 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html