我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！”
1.html编写；
html很简单，containerBg是承载背景的，然后blurStar这个div是星空的容器；meteor是放流星的容器
2.css样式；
这个星空主要是css的样式处理
在body中添加了一个深蓝色的背景，然后还添加了bgBlue浅蓝色的背景；
bgBlue这个样式中运用额一个filter: blur(120px);模糊样式，使其在深蓝色背景下比较融合和协调，没那么突兀；
blurStar这个class是为了星空比较饱满，放置了一些星空背景；也在这个星空背景下用了模糊样式；
下面这段样式是闪烁的样式，这里可以用两个span代替before和after的样式；然后span用了nth-child(2n),改变了第二个span的角度，变成了十字架，然后加上before和after旋转的角度就形成了一个米字，使星星更加真实；
用了一个showHide的动画，使星星若隐若现的动起来；
.spanStar{
width: 10px;
height:10px;
display: block;
border-radius: 50%;
background: #fff;
box-shadow: 0px 0px 8px rgba(255,255,255,1);
position:absolute;
-webkit-animation:showHide 3s infinite; //这里的infinite是循环，3s是这个动画的持续时间
}
.spanStar span{
display: block;
width: 20px;
height:2px;
left:-5px;
border-radius: 0.5px;
background:#fff;
top:4px;
position:absolute;
opacity: 0.7;
}
.spanStar span:nth-child(2n){
top:4px;
-webkit-transform: rotate(90deg);
}
.spanStar::before{
content: "";
display: block;
width: 20px;
height:2px;
border-radius: 0.5px;
left:-5px;
background:#fff;
top:4px;
position:absolute;
-webkit-transform: rotate(45deg);
opacity: 0.7;
}
.spanStar::after{
content: "";
display: block;
width: 20px;
height:2px;
border-radius: 0.5px;
left:-5px;
background:#fff;
top:4px;
position:absolute;
opacity: 0.7;
-webkit-transform: rotate(-45deg);
}
@keyframes showHide {
0%{opacity: 0;}
50%{opacity: 1;}
100%{opacity: 0;}
}
这个样式是流星的样式， animation: animate 3s linear forwards;这里的forwards是流星只会出现一直，如果想让流星一直在，可以改成infinite；
.meteorStar{
position: absolute;
width:2px;
height: 2px;
background: #fff;
border-radius:50%;
box-shadow: 0 0 2px rgba(255,255,255,1);
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
animation: animate 3s linear forwards;
opacity: 0;
}
3.js部分；
这里的js主要是用来循环星星的个数，使背景看起来丰富一些，以及随机放置每个星星的位置，改变星星的大小，是星空看起来更加真实，而且能随意的布满整个画面；
下面这段代码的循环里的数值就是星星的个数，如果想要更多可以更改这个数值，如果想要减少也可以减少，其实两个里面也有相同代码，可以把它融合写在一个里面，这里都只是让星星更丰富；
下面这个方法是添加流星的个数以及位置；这里的span.style.animationDelay,是随机让流星延迟几秒再滑过，使流星更逼真
meteorStar();
function meteorStar() {
let content = document.getElementById('meteor')
for(var i=0; i<10; i++){
var span = document.createElement('span');
content.appendChild(span);
var x = parseInt(Math.random() * screenW*1.2);
var y = 0;
span.classList.add('meteorStar')
span.style.left = x + 'px';
span.style.top = y + 'px';
span.style.zIndex = "0";
var rate = Math.random() * 2;
span.style.animationDelay = rate + 's';
}
}
