<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();
This Pen doesn't use any external CSS resources.