// Author: Ali Soueidan
// Author URI: https//: www.alisoueidan.com

#container

  #comet-route.route
    #comet

  #ufo-route.route
    #ufo 
      p 🛸

  #sun.star

  #mercury.planet

  #venus.planet
    .cloud
    .cloud
    .cloud
  
  .orbit
    #earth.planet
      i.ms-Icon.land.ms-Icon--World
      
    #moon.moon
    
    #iss

  #nav
    button.fire-comet ☄️
    button.fire-ufo 🛸
    button.explode-earth 💥

a( href='http://bit.ly/2JPuBjx' target="_blank" class='reference' ) 🔗 alisoueidan.com
View Compiled 
// Author: Ali Soueidan
// Author URI: https//: www.alisoueidan.com

*
  margin: 0px
  padding: 0px
  box-sizing: border-box
  border: 0px
  outline: 0
  background-repeat: no-repeat
  appearance: none
  border-radius: 0
  font-weight: inherit
  font-style: inherit
  font-family: inherit
  text-decoration: none
  list-style: none
  user-select: text

@keyframes rotate
  0% 
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)

@keyframes ufo
  0% 
    transform: translateX(50vw)
  70%
    transform: translateX(100vw)
  90%
    transform: translateX(100vw)
  100%
    transform: translateX(200vw)

@keyframes rotate-z
  0% 
    transform: translateX(-2.5vh)
  100%
    transform: translateX(2.5vh)

@keyframes orbiting
  0% 
    z-index: 3
    top: 0 
    right: 100%
    bottom: 100%
    left: 0
    transform: scale(1)
  25% 
    z-index: 3
    top: 50%
    right: 50%
    bottom: 50%
    left: 50%
    transform: scale(2)
  50% 
    z-index: 1
    top: 100%
    right: 0
    bottom: 0
    left: 100%
    transform: scale(1) translate(-100%,-100%)
  75% 
    z-index: 1
    top: 50%
    right: 50%
    bottom: 50%
    left: 50%
    transform: scale(.5)
  100% 
    z-index: 1
    top: 0 
    right: 100%
    bottom: 100%
    left: 0
    transform: scale(1)

@keyframes orbiting-iss
  0% 
    z-index: 3
    top: 0 
    right: 0
    bottom: 100%
    left: 100%
    transform: scale(1)
  25% 
    z-index: 3
    top: 50%
    right: 50%
    bottom: 50%
    left: 50%
    transform: scale(2)
  50% 
    z-index: 1
    top: 100%
    right: 100%
    bottom: 0
    left: 0
    transform: scale(1) translate(-100%,-100%)
  75% 
    z-index: 1
    top: 50%
    right: 50%
    bottom: 50%
    left: 50%
    transform: scale(.5)
  100% 
    z-index: 1
    top: 0 
    right: 0
    bottom: 100%
    left: 100%
    transform: scale(1)

body 
  display: flex 
  flex-direction: column
  justify-content: center 
  align-items: center
  margin: 0
  height: 100vh
  max-width: 100vw
  overflow: hidden
  
#container 
  margin: 0
  height: 100vh
  width: 100vw
  background-color: #202
  background: radial-gradient( #002 40%, #001 100% )
  
#comet-route
  $size: 1
  $color: #02bc70
  $tailColor: rgba(2, 188, 112, .9)
  position: relative
  z-index: 100
  top: 25%
  left: -50%
  width: 200vh
  min-width: 200vw
  height: $size+vh
  animation: rotate 240s linear 0s infinite
  #comet
    width: $size+vh
    height: $size+vh
    background-color: $color
    filter: drop-shadow( 8px 0 12px $color )
    border-radius: 50%
    &.fire 
      transition: 1s ease
      transform: translateX(200vw)
    &:after 
      content: ""
      display: block
      width: $size*20+vh
      height: $size+vh
      background: linear-gradient(90deg, transparent, $tailColor)
      transform: translateX( calc(-100% + #{$size/2+vh}) )
  
#ufo-route
  $size: 1
  $color: #02bc70
  $tailColor: rgba(2, 188, 112, .9)
  position: absolute
  z-index: 100
  top: 25%
  left: -50%
  width: 200vh
  min-width: 200vw
  height: $size+vh
  animation: rotate 6s reverse 0s infinite
  #ufo
    position: relative
    font-size: 2vh
    width: $size+vh
    height: $size+vh
    filter: drop-shadow( 0px -3px 12px $color )
    border-radius: 50%
    &.fire 
      animation: ufo 10s linear 0s infinite
    
.backgroundstars 
  position: absolute
  top: 50%
  left: 50%
  width: 2px
  height: 2px
  background-color: #eaeaea
  transition: 1s ease
  will-change: transform
  &.blink
    transform: translate( -50%, -50% ) scale(2)
    filter: drop-shadow( 0 0 3px rgba(255,255,255,1) )
    
.star, .planet, .moon
  border-radius: 50%

#sun 
  $size: 50
  position: absolute
  top: 0
  right: 0
  transform: translate(50%,-50%)
  height: $size+vh
  max-height: $size+vw
  width: $size+vh
  max-width: $size+vw
  background: radial-gradient( rgba(255,255,50,1), rgba(220,180,25,1) ) 
  filter: drop-shadow(0 0 10vh rgba(255,180,120,1)) drop-shadow(0 0 2.5vh rgba(220,180,25,1))
  
#mercury
  $size: 2
  position: absolute
  z-index: 10
  top: 20%
  right: 20%
  transform: translate(-50%,-50%)
  height: $size+vh
  max-height: $size+vw
  width: $size+vh
  max-width: $size+vw
  background: radial-gradient( #333,#444 ) 
  filter: drop-shadow(0 0 2vh #fff) 
  
#venus
  $size: 6
  position: absolute
  top: 30%
  right: 25%
  transform: translate(-50%,-50%)
  height: $size+vh
  max-height: $size+vw
  width: $size+vh
  max-width: $size+vw
  background: radial-gradient(#de8438,#8f481c) 
  filter: drop-shadow(0 0 10vh #de8438) drop-shadow(0 0 2.5vh #8f481c)
  animation: rotate 120s linear 0s infinite
  overflow: hidden
  .cloud
    $size: 1.25
    position: absolute
    top: 20%
    left: -20%
    height: $size+vh
    max-height: $size+vw
    width: $size*4+vh
    max-width: $size*4+vw
    background: rgba(120,20,40,.2)
    border-radius: 50%
    &:first-child 
      top: 45%
      left: 50%

    &:last-child 
      top: 70%

  
.orbit
  $size: 30
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%,-50%)
  display: flex
  justify-content: center
  align-items: center
  height: $size+vh
  max-height: $size+vw
  width: $size+vh
  max-width: $size+vw
  transition: 2.5s ease
  &.fire
    filter: brightness(50)
  &.explode
    transition: 2.5s ease
    filter: brightness(100)
  &.done
    opacity: 0
    filter: brightness(0)
  
  #earth
    z-index: 2
    display: flex
    justify-content: center
    align-items: center
    height: 66.666%
    width: 66.666%
    box-shadow: 0 0 2vh rgba(255,255,255,.2)
    filter: drop-shadow(0 0 10vh rgba(17,128,243,1)) drop-shadow(0 0 2.5vh rgba(29,84,226,1))
    overflow: hidden
    background: radial-gradient(#207AF0,#1f52e3)
    animation: rotate 240s linear 0s infinite

    .land 
      font-size: 25vh
      color: rgba(80,220,40,.5)
    
  #moon
    $size: 3
    position: absolute
    z-index: 3
    height: $size+vh
    max-height: $size+vw
    width: $size+vh
    max-width: $size+vw
    background: radial-gradient(#fff,#eaeaea)
    border: 1px solid #fff
    filter: drop-shadow(0 0 1vh #fff)
    animation: orbiting 30s linear 0s infinite, rotate 10s linear 0s infinite
    overflow: hidden
    &:after
      $size: 1
      content: ""
      position: absolute
      top: 10%
      left: 10%
      height: $size+vh
      max-height: $size+vw
      width: $size+vh
      max-width: $size+vw
      background: radial-gradient(#333,#aaa)
      border-radius: 50%
      animation: rotate-z 5s linear 0s infinite
    &:before
      $size: .5
      content: ""
      position: absolute
      top: 50%
      left: 30%
      height: $size+vh
      max-height: $size+vw
      width: $size+vh
      max-width: $size+vw
      background: radial-gradient(#333,#aaa)
      border-radius: 50%
      animation: rotate-z 5s linear 0s infinite
    
  #iss
    $size: .125
    position: absolute
    z-index: 3
    height: $size+vh
    max-height: $size+vw
    width: $size+vh
    max-width: $size+vw
    background: radial-gradient(#fff,#eaeaea)
    filter: drop-shadow(0 0 1vh #fff)
    animation: orbiting-iss 2s linear 0s infinite
    
#nav 
  $size: 5
  position: absolute
  bottom: 24px
  left: 50%
  transform: translateX(-50%) 
  display: flex
  justify-content: space-around
  width: $size*5+vh
  max-width: $size*5+vw
  height: $size+vh
  max-height: $size+vw
  
  button
    width: $size+vh
    font-size: $size/2+vh
    border-radius: 50%
    transition: .4s ease
    background-color: #ffffff
    filter: drop-shadow(0 0 10px #909)
    &:hover, &:active
      cursor: pointer
      transform: scale(1.1)
  
.reference
  position: absolute
  right: 24px 
  bottom: 24px
  color: #fff
  font-family: arial
  text-decoration: none
View Compiled 
// Author: Ali Soueidan
// Author URI: https//: www.alisoueidan.com

setStargazer = {
  // Set quantity of genereted Elements
    quantity: 500,
  // Set id or class of parent element which shell contain the generated Elemenets
    selectContainer: "body",
  // Set the Tag name of the generated item (Div, Span, p, etc.)
    generateItemTag: "span",
  // Set classname which will title the generated Elements (also id -> classname-i will be generated)
    generateItemClass: "backgroundstars",
  // Morphclass will be the classname of morphed Elements to set morph state of generated elements
    setMorphClass: "blink",
  // Morphspeed will set how fast the Morph will be executed in milliseconds
    setMorphSpeed: 1000,
  // Morphquantity will set how many Elements will morph in a MorpSpeed execution
    setMorphQuantity: 160,
  // Morphquantity will set how many Elements will morph in a MorpSpeed execution
    devMode: "on"
};
  
document.addEventListener("DOMContentLoaded", function() {
  
  //////
  // Execution

  // Select star-divs
    const CONTAINER = document.querySelector(setStargazer["selectContainer"]);

  // Set while loop for generating stars
    let quantityCounter = 0;
    while ( setStargazer["quantity"] >= quantityCounter ){
      CONTAINER.insertAdjacentHTML('afterbegin', '<div class="' + setStargazer["generateItemClass"] + '" id="' + setStargazer["generateItemClass"] + '-' + quantityCounter +'"></div>');
      ++quantityCounter;
    };

  // Selct generatedItems by class
    const GENERATEDITEM = document.querySelectorAll(setStargazer["selectContainer"] + " > ." + setStargazer["generateItemClass"]);
    
  // Set counter  
    let i = 0;
  // Select every star and reposition it by coincidence
    GENERATEDITEM.forEach( function() {
      // defining x coordinate
        let x = Math.floor((Math.random() * 99) + 1);
      // defining y coordinate
        let y = Math.floor((Math.random() * 99) + 1);
      // Setting star position x & Y
        GENERATEDITEM[i].style.left = x + "%";
        GENERATEDITEM[i].style.top = y + "%";
      // Counting up the counter
        ++i;
    });


  //////
  // lets do some bling bling (super easy, super simple) 

  // Setup interval timing
    function blink(){
      // Setup of a random selektor
        let startID = Math.floor((Math.random() * 100) + 1);
      // Selekting random star
        let selection = document.querySelector( "#" + setStargazer["generateItemClass"] + "-"+ startID);
      // Adding blink-classs to selektion
        selection.classList.add(setStargazer["setMorphClass"]);
        setTimeout(function(){ 
          // Removing Blink-class after timeout
            selection.classList.remove(setStargazer["setMorphClass"]);
        }, setStargazer["setMorphSpeed"]/2);
    };

  // Let the magic beginn
    setInterval( blink, setStargazer["setMorphSpeed"]/setStargazer["setMorphQuantity"] );
  
});
  
// Setting up the comet event
  document.querySelector(".fire-comet").addEventListener( "click", function() {
    
  let comet = document.querySelector("#comet").classList;
  let btnStatus = this;
    
  comet.add("fire");
  btnStatus.style.backgroundColor = "#999";

  setTimeout(function(){ 
    comet.remove("fire");
    btnStatus.style.backgroundColor = "#fff"; 
  }, 1000);
    
});
  
// Setting up the ufi event
  document.querySelector(".fire-ufo").addEventListener( "click", function() {
    
  let comet = document.querySelector("#ufo").classList;
  let btnStatus = this;
    
  comet.add("fire");
  btnStatus.style.backgroundColor = "#999";

  setTimeout(function(){ 
    comet.add("explode");
  }, 5000);

  setTimeout(function(){ 
    comet.add("done");
  }, 10000);

  setTimeout(function(){ 
    comet.remove("fire");
    btnStatus.style.backgroundColor = "#fff"; 
  }, 10000);
    
});
  
// Setting up the explode event
  document.querySelector(".explode-earth").addEventListener( "click", function() {

  let comet = document.querySelector(".orbit").classList;
  let btnStatus = this;
    
  comet.add("fire");
  btnStatus.style.backgroundColor = "#999";

  setTimeout(function(){ 
    comet.add("explode");
  }, 2500);

  setTimeout(function(){ 
    comet.add("done");
  }, 5000);

  setTimeout(function(){ 
    comet.remove("fire");
    btnStatus.style.backgroundColor = "#fff"; 
  }, 10000);

  setTimeout(function(){ 
    comet.remove("fire");
    comet.remove("explode");
    comet.remove("done");
    btnStatus.style.backgroundColor = "#fff"; 
  }, 12500);
    
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.