1，效果图
2，源码
HTML
< body >
< div class = “container” >
< div id = “mask” > </ div >
< div id = “sky” > </ div >
< div id = “moon” > </ div >
< div id = “stars” > </ div >
< div class = “cloud cloud-1” ></ div >
<div class = “cloud cloud-2” > </ div >
< div class = “cloud cloud-3” > </ div >
</ div >
</ body >CSS
/* - - - - - - 重启 - - - - - - */ * {
保证金：0 ;
填充：0 ;
}
html，
body {
width：100％ ;
最小宽度：1000px ;
身高：100％ ;
最小高度：400px ;
溢出：隐藏;
}
/ * ------------画布------------ * /
.container {
position：relative;
身高：100％ ;
}
/ *遮罩层* /
#mask {
position：absolute;
宽度：100％ ;
身高：100％ ;
background：rgba（0,0,0，.8）;
z-index：900 ;
}
/ *天空背景* /
#sky {
width：100％ ;
身高：100％ ;
background：线性渐变（rgba（0,150,255,1），rgba（0,150,255，.8），rgba（0,150,255，.5））;
}
/ *月亮* /
#moon {
position：absolute;
上：50px ;
右：200px ;
宽度：120px ;
身高：120px ;
背景：rgba（251,255,25,0.938）;
border-radius：50％ ;
box-shadow：0 0 20px rgba（251,255,25,0.5）;
z-index：9999 ;
}
/ *闪烁星星* /
.blink {
position：absolute;
background：rgb（255,255,255）;
border-radius：50％ ;
box-shadow：0 0 5px rgb（255,255,255）;
不透明度：0 ;
z-index：10000 ;
}
/ *流星* /
.star {
position：absolute;
不透明度：0 ;
z-index：10000 ;
}
.star :: after {
content：“” ;
显示：块;
边界：坚固;
border-width：2px 0 2px 80px ;
/ *流星随长度逐渐缩小* /
border-color：透明透明透明rgba（255,255,255,1）;
border-radius：2px 0 0 2px ;
transform：rotate（-45deg）;
transform-origin：0 0 0 ;
盒子阴影：0 0 20px rgba（255,255,255，.3）;
}
/ *云* /
.cloud {
position：absolute;
宽度：100％ ;
身高：100px ;
}
.cloud-1 {
bottom： - 100px ;
z-index：1000 ;
不透明度：1 ;
变换：规模（1.5）;
-webkit-transform：scale（1.5）;
-moz-transform：scale（1.5）;
-ms-transform：scale（1.5）;
-o-transform：scale（1.5）;
