dead stars

by levchenko_d

HTML

<div class="star"><span>star</span></div>
<div class="earth"><span>earth</span></div>

CSS

body{
    background: #34383e;
    height: 100vh;
}

.star, .earth, .ray{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: yellow;
    position: absolute;
    top:0;
    bottom:0;
    margin: auto;
    left: 100px;
    color: white;
}

.star{
    -webkit-transition: 0.5s ease-out;
}

.earth{
    height: 20px;
    width: 20px;
    background: blue;
    left: auto;
    right: 100px;
}

span{
margin: -25px 0 0 0;
    display: block;
}

.ray{
    width: 20px;
    height: 1px;
}

.star.explode{
    width: 260px;
    height: 260px;
    left: 70px;
    background: red;
}

JavaScript

var star = document.querySelector('.star');
var earth = document.querySelector('.earth');

function moveRay(ray, rx){
    var ex = earth.offsetLeft;
    var nx = rx;
    console.log(nx)
    var move = setInterval(function(){
        if(nx<ex-20){
            nx += 10;
            ray.style.left = nx + 'px';
        } else {
            window.clearInterval(move);
            document.body.removeChild(ray);
        }
        
    }, 500);
}

function sendRay(){
    var sx = star.offsetLeft;
    var ray = document.createElement('div');
    var rx = sx + 200;
    ray.className = 'ray';
    document.body.appendChild(ray);
    ray.style.left = rx + 'px';
    moveRay(ray, rx);
}
var i=0;
var glow = setInterval(function(){
    if(i>10){
        window.clearInterval(glow);
        star.className += ' explode';
        setTimeout(function(){
            star.style.display = 'none';
        }, 500)
    } else {
        i++;
        sendRay();
    }
    

}, 1500)