持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第24天，点击查看活动详情

前言

流星大家都见过吧，在夜空中停留的时间很短暂，一下子就消失殆尽了。不知道大家是不是和我一样，但凡碰上流星雨，从来就是被云挡住，快乐与我无关。

今天我就手把手带大家整一个夜空流星划过的效果，让大家一次看个过瘾！

绘制夜空

首先当然是绘制我们的背景板，也就是夜空的绘制啦。

老规矩，先 重置 css 默认样式 。

* {
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
}

夜空我们用一个 div 元素表示。

<body>
    <div id="body"></div>
</body>

同时，设置其宽高为视口大小，且背景渐变。

body {
    height: 100vh;
    overflow: hidden;
}
#body {
    position: relative;
    width: 100%;
    height: 100vh;
    background: var(--skyColor);
}

看看效果：

微信截图_20221010162300.png

绘制月亮

月亮我们可以用两个大小不同的圆进行叠加，这么说有的小伙伴可能不太理解，我给大家简单画个图。

微信截图_20221010162619.png

实际上我们将两个圆重叠在一起，然后将遮罩作用的圆（灰色的）背景色设置为夜空的颜色，从视觉上来看就是个弯弯的月亮了。

<div id="moon">
    <div id="filled-moon">
      <div id="trans-moon"></div>
    </div>
</div>

我们看看效果：

微信截图_20221010162821.png

绘制山峦

接下来我们要绘制山峦，让整个画面显得更静谧一些。

这里的山我用 旋转 45° 圆角正方形 来模拟，然后只显示正方形的一部分。如下：

微信截图_20221010163357.png

最终显示的是黑线上部分，用来模拟山。其余部分舍弃。

我们一共要画 8 座山，山与山之间部分重叠，因此我们这里对山峰使用 绝对定位 absolute 的方式，将山峰的父元素设置为 相对定位 relative ，通过对每座山设置不同的 left 值，实现一重一重相叠的效果。

  #mountain1,
  #mountain2,
  #mountain3,
  #mountain4,
  #mountain5,
  #mountain7,
  #mountain8,
  #mountain6 {
    position: absolute;
    bottom: -20%;
    width: 20rem;
    border-radius: 10px 0px 0px 0px;
    height: 20rem;
    transform: rotate(45deg);
    background: var(--mountainColor);
    z-index: 10000;
  }

效果如下：

微信截图_20221010163610.png

闪烁的星星

接下来就是锦上添花了，我们需要绘制一些星星来点缀我们的画面。

这里我用圆点来模拟星星，同时，对于不同的星星，我们也是通过将星星设置为 绝对定位 的方式，让这些星星分布在夜空的各个位置。

我们给所有星星设置如下属性：

.star {
    position: absolute;
    border-radius: 50%;
    width: 0.5rem;
    height: 0.5rem;
    background-color: rgb(208, 224, 255);
}

同时通过 top 和 left 属性对它们进行偏移，使它们散开。

微信截图_20221010164325.png

仅仅是这样还不够，我们需要让星星 duang 起来，这样会更生动一些。

那么怎么让星星 duang 起来呢？是动画，我们要用动画！

@keyframes venus {
    0% {
      background-color: rgba(255, 255, 255, 0.849);
    }

    100% {
      width: 0.45rem;
      height: 0.45rem;
      background-color: rgb(183, 220, 255);
      box-shadow: 0.2rem 0.2rem 15px rgb(183, 220, 255),
        0.5rem 0.5rem 30px rgb(183, 220, 255);
    }
}

我们通过动画让星星不断的进行缩放，同时添加上光影，此时星星的效果如下：

是不是生动了许多呢？

绘制流星

微信截图_20221010170803.png

流星效果是怎么实现的呢？我给大家画个示意图：

演示文稿1.gif

<div class="meteor-cont">
    <div class="meteor-ani">
      <div id="meteor"></div>
    </div>
</div>

星星本体是由一个轨道容器包裹住的，这个轨道的长度要足够长，超出视口，同时星星也通过定位在屏幕外待命。

当动画开始的时候，调整星星的 left 属性，让其从右往左不断偏移，直至被遮住或超出屏幕外（就是模拟它自然消失）。

搭配示意图，就很容易理解了，我们只要将这个轨道通过 rotate 进行旋转，模拟流星从右上方向左下方坠落的轨迹就好了。

 .meteor-ani {
     ...
     animation: meteor 4s linear infinite;
}

这里 meteor 表示应用的动画名称，4s 表示动画的时间，linear 表示动画在每一动画周期中执行的节奏，这里是线性的，模拟流星划过的节奏，infinite 表示循环播放动画。

@keyframes meteor {
    0% {
      transform: translateY(0%);
    }
    100% {
      transform: translateY(100%);
    }
}

注意这里我们是通过 translateY 实现流星划过的效果的，因为我们原本的轨道是从上往下的，只是因为我们对轨道进行了旋转，才看着像是从 X 轴偏移，实际上它应该是沿 Y 轴向下偏移。

最终效果如下：

码上掘金

Github 源码地址

catwatermelon/juejin-demo (github.com)

结束语

本文就到此结束了，希望大家阅读本文能所收获，同时也希望大家能见到真正的流星。

如果小伙伴们有别的想法，欢迎留言，让我们共同学习进步💪💪。

如果文中有不对的地方，或是大家有不同的见解，欢迎指出🙏🙏。

如果大家觉得所有收获，欢迎一键三连💕💕。

✨ 破月衔高岳，流星拂晓空 🌠 CSS 绘制夜空流星，属于程序员的浪漫！

前言