我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

大家好，时隔一个月，我又回来了（这段时间一直在准备秋招，所以断更了一些时间）。恰逢今日中秋，在这里我祝大家中秋快乐，团团圆圆。

既然是中秋节，就一定少不了我们今日的主角：月亮 。所以，在此奉上一个月亮给大家来赏一赏。

代码块如下：

Moon&Stars - 码上掘金 (juejin.cn)

效果如下：

圆圆的月亮

漫漫黑夜中，一轮圆月挂在心头。首先我们来做一个黑夜背景。让全屏背景变为黑色，然后再来画出圆月，并且添加一些效果让它更加生动形象。

• html

 <div class="container">
        <div class="moon"></div>
 </div>

• css

* {
    margin: 0;
    padding: 0;
}
.container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #01050D;
}
.moon {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: rgb(219, 207, 175);
    box-shadow: 0 0 60px #F5FFFA;
    position: absolute;
    left: 80%;
    top: 140px;
    animation: myMoon 3s linear;
}

将整体背景染为黑色，然后通过圆形将一轮圆月画出，当然这并不是简简单单的圆，而要通过设置动画，使这个圆产生渐变，光晕，让这轮圆月变得更加丰满。动画在这里就不详细讲解了，对动画感兴趣的朋友可以看看我前面有关 css 的文章，里面也有提到相关动画设置。

现实中的月亮在最外层会有一层模糊感，所以通过动画将透明度逐渐从0-1，并设置好动画时间，在视觉上产生移动，使其更加逼真。相关代码如下：

@keyframes myMoon {
    0% {
        left: 78%;
        top: 130px;
        opacity: 0;
    }
    10% {
        left: 78.2%;
        top: 131px;
        opacity: 0.1;
    }
    20% {
        left: 78.4%;
        top: 132px;
        opacity: 0.2;
    }
    30% {
        left: 78.6%;
        top: 133px;
        opacity: 0.3;
    }
    40% {
        left: 78.8%;
        top: 134px;
        opacity: 0.4;
    }
    50% {
        left: 79%;
        top: 135px;
        opacity: 0.5;
    }
    60% {
        left: 79.2%;
        top: 136px;
        opacity: 0.6;
    }
    70% {
        left: 79.4%;
        top: 137px;
        opacity: 0.7;
    }
    80% {
        left: 79.6%;
        top: 138px;
        opacity: 0.8;
    }
    90% {
        left: 79.8%;
        top: 139px;
        opacity: 0.9;
    }
    100% {
        left: 80%;
        top: 140px;
        opacity: 1;
    }
}

通过这样的设置之后，黑夜 + 圆月就设计完成了。

漫天闪闪星空

有了黑夜和月亮，怎么能少了星空来点缀呢，现在便来设计漫天闪闪星空。

你想要多少个星星，就设置多少个 span，对 span 再进行样式设计。用 position 属性中 top 和 left 来设置星星随机分布。

• html

 <div class="stars">
            <span></span><span></span>
            <span></span><span></span>
            <span></span><span></span>
            <span></span><span></span>
            <span></span><span></span>
            <span></span><span></span>
            <span></span><span></span>
            <span></span><span></span>
            <span></span><span></span>
        </div>

• css

.stars{
    position: relative;
    width: 100%;
    height: 100%;
}
.stars span:nth-child(1){
    top: 10%;
    left: 10%;
}
.stars span:nth-child(2){
    top: 20%;
    left: 20%;
}
.stars span:nth-child(3){
    top: 30%;
    left: 30%;
}
...

如何完成一闪一闪的效果呢？依旧通过动画来实现。设置 blanking 动画，用 transform 属性将星星大小放大两倍，旋转 45度变成菱形。

.stars span{
    display: inline-block;
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: white;
    transform: rotate(45deg);
    /* 使星星模糊一点 */
    opacity: 0.2;
    /* 动画名称 动画时间  速度  开始时间 次数 */
    animation: blinking 1s linear infinite;
}
/* blinking : 闪烁 */
@keyframes blinking{
    0%,100%{
      opacity: 0.2;
    }
    50%{
      transform: scale(2) rotate(45deg);
      opacity: 1;
    }
}

这些完成后，就OK了，整体就能看到漫天闪闪星空了。最后两者一结合，就能看见一轮圆月挂在漫天闪闪星空的美景咯。

最后

最后的最后，再次祝各位中秋快乐，团团圆圆！ o(￣▽￣)