满天星特效

<div class="starBox">
    <div class="bg"></div>
    <div class="earth">
        <img src ='https://ae01.alicdn.com/kf/H38c7d88ba23a442c9da94b079cc2585fl.jpg' />
        <div class="circle circle1"></div>
        <div class="circle circle2"></div>
        <div class="circle circle3"></div>
        <div class="circle circle4"></div>
        <div class="circle circle5"></div>
    </div>
        <div class="stars" id="star"></div>
</div>

init(){
    let star=document.getElementById('star');
    let html = ''
    let cols=['#293b8b', '#ecf0f1', '#ececec', '#f5d76e', '#f4d03f'];
    for (let i = 0; i <= 100; i++) {
        let size = Math.random() * 3;
        let color = this.cols[parseInt(Math.random() * this.cols.length)];
        html += `
        <span class='star' style="width:${size}px;
        height:${size}px;
        top:${ Math.random() * 100}%;
        left:${Math.random() * 100}%;
        background:${color};
        box-shadow: 0 0 ${Math.random() * 10}px ${color};
        animation-delay:${Math.random()*3}s"></span>
        `
    };  
    star.innerHTML=html
}

.starBox{
    width: 100%;
    height: 700px;
    position: relative;
    overflow: hidden;
}
.stars{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .5;
}
.star{
    display: inline-block;
    width: auto;
    position: absolute;
    border-radius: 100%;
    transition: 100s linear;
    animation: fade 2s linear infinite;

}


.bg{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('https://ae01.alicdn.com/kf/H0d66887bcd694f9095f19f6baba3e6a9l.jpg') no-repeat center center;
    background-size: cover;
}

.earth {
    position: absolute;
    top: 0;
    right: 5%;
    width: 400px;
}

.earth img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
}

.circle {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.1);
    animation: fadeIn 3s linear infinite;
    opacity: 0;
}

.circle1 {
    top: -125px;
    left: 0px;
    width: 400px;
    height: 400px;
    animation-delay: 0.5s
}

.circle2 {
    top: -250px;
    left: -150px;
    width: 700px;
    height: 700px;
    animation-delay: 1s;
}

.circle3 {
    top: -400px;
    left: -300px;
    width: 1000px;
    height: 1000px;
    animation-delay: 1.5s;
}

.circle4 {
    top: -600px;
    left: -500px;
    width: 1400px;
    height: 1400px;
    animation-delay: 2s;
}

.circle5 {
    top: -800px;
    left: -700px;
    width: 1800px;
    height: 1800px;
    animation-delay: 2.5s;
}
@keyframes fadeIn {
    0% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
        transform: scale(1.5)
    }
}
@keyframes fade{
    0%{
        opacity: 0.3;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0.3;
    }
}