我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！
先来一睹为快最终的效果吧！如下：
看到图，我们思路其实就很明确了，仅用css以及一些动画，就可以实现。大致就是先设置一个relative的视窗，然后里面的元素用absolute定位来画。圆形的大月亮，梯形带三角屋顶的风车房，利用transform: rotate(360deg)来旋转的风车骨架，天上随机改变opacity的闪烁的星星，box-shadow来形成灯光效果的门窗，以及translateX划过天空的流星。
是不是很简单，一副很美妙的图画，其实用到的都是我们耳熟能详的css属性。
这里我们略过最简单的月亮和圆形外框，先来说说天上闪烁的星星：
let fragment = document.createDocumentFragment();
// 创建30颗星星
for (let i = 0; i < 30; i++) {
// 生成随机位置
let child = document.createElement("div");
child.className = "star star-" + (i + 1);
child.style = `left:${randomNum(40, 300)}px;top:${randomNum(
40,
200
)}px;`;
child.style.setProperty("animation-duration", randomNum(2, 5) + "s");
fragment.appendChild(child);
}
document.getElementById("stars").appendChild(fragment);
首先通过js来随机生成了30颗星星的位置，然后通过奇偶数赋予不同的闪烁时间，让它们模拟出天上真正繁星闪烁的样子。
/* 星星 */
.star {
background: white;
height: 2px;
width: 2px;
position: absolute;
left: 100px;
top: 20px;
border-radius: 25%;
opacity: 0.5;
}
@keyframes starOdd {
10% {
opacity: 0.3;
}
90% {
opacity: 0.7;
}
}
@keyframes starEven {
10% {
opacity: 0.1;
}
90% {
opacity: 0.8;
}
}
.star:nth-child(odd) {
animation: starOdd 2.5s ease-in infinite;
}
.star:nth-child(even) {
animation: starEven 2.5s ease-in infinite;
}
风车的骨架思路其实就像画画一样，长方形的主骨架，然后是一个个间隔开的横梁。只需要画出一个，剩下三个利用rotate旋转90、180、270度就行了：
.fan-wing {
width: 89px;
height: 16px;
border-bottom: 8px solid #292f4c;
position: relative;
left: 0;
left: 0;
}
.fan-1 {
left: 0;
}
.fan-2 {
transform: rotate(90deg);
transform-origin: 102px 7px;
}
.fan-3 {
transform: rotate(180deg);
transform-origin: 90px -4px;
}
.fan-4 {
transform: rotate(270deg);
transform-origin: 52px -17px;
}
其他的细节看看代码就行：
中秋快到了，祝大家佳节快乐哦~
