<div id="stars"></div>
body {
  background-color: #000029;
}

#sky {
  height: 100%;
}

.star {
  box-shadow: 0px 0px 1px 1px rgba(255, 255, 255, 0.4);
  position: absolute;
  width: 1px;
  height: 1px;
  border-radius: 2px;
  background-color: white;
}
function createStars(i) {
  for (var i; i; i--) {
    drawStars();
  }
}

function drawStars(){
  var tmpStar = document.createElement('figure')
  tmpStar.className = "star";
  tmpStar.style.top = 100*Math.random()+'%';
  tmpStar.style.left = 100*Math.random()+'%';
  document.getElementById('stars').appendChild(tmpStar);
}

function selectStars() {
    stars = document.querySelectorAll(".star");
  console.log(stars)
}

function animateStars() {
      Array.prototype.forEach.call(stars, function(el, i){
      TweenMax.to(el, Math.random() * 0.5 + 0.5, {opacity: Math.random(), onComplete: animateStars});
    });
}

createStars(200);
selectStars();
animateStars();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js