中秋节献礼，赏月

我正在参加中秋创意投稿大赛，详情请看：juejin.cn/post/700315…

最近难得空闲，也正好看到这个创意大赛，既然中秋了，怎么能少的了月亮呢，new个月亮，大家一起赏月吧！

一、先画一个月亮

html

 <div id="moon"></div>

css

#moon {
  position: absolute;
  top: 50px;
  width: 200px;
  height: 200px;
  background-color: #F2F2F2;
  background: linear-gradient(to right, #B3B3B3 20%, #F7DA50 80%);
  border-radius: 100px;
  box-shadow: 0 0 60px 50px rgba(0, 0, 200, 0.4);
  opacity: 1;
  z-index: 2;
}

如图所示：

二、实现飘动的云彩

云彩的飘动要注意两点：

1.要有白色云的形状 2.要有滚动的动画

html:

<div class="cloud">
    <div class="cloud-part part1"></div>
    <div class="cloud-part part2"></div>
  </div>
  <div class="cloud" id="anotherCloud">
    <div class="cloud-part part1"></div>
    <div class="cloud-part part2"></div>
  </div>

这里用两组云彩

css:

.cloud {
  position: absolute;
  width: 300px;
  height: 90px;
  background-color: #EEEEEE;
  border-radius: 50px;
  opacity: .8;
  box-shadow: 0 0 50px 60px #eeeeee;
  top: 140px;
  left: 270px;
  z-index: 3;
  animation: moveCloud 100s infinite linear;
}

.cloud-part {
  width: 100px;
  height: 40px;
  background-color: #EEEEEE;
  border-radius: 50px;
  box-shadow: 0 0 50px 60px #eeeeee;
}

.part1 {
  margin-left: 270px;
  margin-top: 40px;
}

.part2 {
  margin-top: -140px;
  margin-left: 20px;
}

#anotherCloud.cloud {
  top: 250px;
  animation-duration: 50s;--添加动画进行滚动
}
#anotherCloud.cloud .cloud-part.part1 {
  margin-left: 230px;
  margin-top: 60px;
}

云彩如图所示：

三、实现星空里的小星星

星空里的小星星使用js绘制

window.onload = function () {
      var num = 0;
      for (i = 0; i < 1001; i++) {
        var thetop = Math.floor(Math.random() * 601) + "px";
        var theleft = Math.floor(Math.random() * 1601) + "px";
        var opacity = Math.random();
        console.log({ left: theleft, top: thetop });
        var newStar = document.createElement("div");
        newStar.className = "star";

        document.body.appendChild(newStar);
        newStar.style.top = thetop;  --顶部
        newStar.style.left = theleft; --左边
        newStar.style.opacity = opacity; --透明度
        num++;
        // document.getElementById("starCount").innerHTML = num;
      }
    };

页面初始化时，创建随意的相对位置距离，然后创建div,再给这些小星星加到页面上 如图所示：

四、添加渐入打字的祝福话语

1.要引入jquery

2.引入jquery.textillate.js文件

总体效果如图所示：