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

中秋月亮🌕 和 雾

引言

先祝大家，中秋节快乐！

在中秋那天，看到月亮是真的圆

不过呢，可能是我看的时间比较晚，于是看到 两个星星 各在一旁陪着 圆月，还有 一缕雾 缠绕在最前面！

这个风景是真的好，所以就想实现一波！

项目截图

实现

1.月亮

肯定是先 实现 我们的 月亮

关键在于，需要添加 阴影 来实现 月亮 的一个周围 发光效果

• 需要我们的 box-shadow 属性，MDN 的介绍

• 月亮发光的颜色，不能太亮，所以还需要 opacity 来控制下透明度

<div class="moon"></div>
  
.moon {
    width: 200px;
    height: 200px;
    background: #f3c743;
    border-radius: 50%;
    box-shadow: 0 0 30px 5px rgb(255 255 240);
    opacity: 0.8;
    position: relative;
    overflow: hidden;
}

可以看到月亮的效果出来了

坑洼

需要注意的是，如果直接画 月亮 ，就感觉没有生机！

因为 月亮 上，还有 坑洼 的效果，这里我们用深色的 圆球，通过定位的方式来处理！

<div class="moon">
  <div class="circle circle1"></div>
  <div class="circle circle2"></div>
  <div class="circle circle3"></div>
  <div class="circle circle4"></div>
</div>

.circle {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #f2c12f;
  border: 1px solid #d9ad2a;
  border-radius: 50%;
}
.circle1 {
  left: 25px;
  top: 80px;
}
.circle2 {
  left: 145px;
  top: 30px;
}
.circle3 {
  left: 125px;
  top: 177px;
}
.circle4 {
  left: 49px;
  top: 3px;
}

2.星星

星星 和 月亮 的实现效果差不多，只是 大小 以及 颜色 不同而已

所以这里可以通过定位快速的处理下

  <div class="stars">
    <div class="star star1"></div>
    <div class="star star2"></div>
  </div>
  
  .stars {
    position: absolute;
    width: 100px;
  }
  .star {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #f7dd8e;
    border-radius: 50%;
    box-shadow: 0 0 10px 1px rgb(255 255 240);
  }
  .star1 {
    left: 300px;
    bottom: -50px;
  }
  .star2 {
    left: -260px;
    bottom: -150px;
  }

3.雾

最后是我们的 雾 的效果

其实尝试了好几种方案，都不太理想！

最后发现，竟然可以通过 文字倾斜 结合 文字阴影 的方式来实现，直接打开了思路！

• 文字阴影 - text-shadow 的 MDN 文档

  

.clouds {
  position: absolute;
  display: flex;
}
.cloud {
  font-size: 100px;
  color: transparent;
  text-shadow: 0 0 20px whitesmoke;
  transform: translate3d(0, 6rem, 0) rotate(-40deg) skewX(64deg) scale(2);
}

.cloud10 {
  position: absolute;
  bottom: -66px;
}

.cloud7 {
  position: absolute;
  bottom: -70px;
  right: 253px;
}

.cloud9 {
  transform: translate3d(0, 6rem, 0) rotate(-40deg) skewX(64deg) scale(2.6);
}

效果

将所有的代码放到 码上掘金 上面了，纪念下！

code.juejin.cn/pen/7140177…

总结

这里用到了 很多 css 的样式 知识点

定位、box-shadow、text-shadow、transform 的使用