<html>
<head></head>
<body onload="putStars()">
<div id="wrapper">
<div id="star"></div>
<div id="sky" class="sky"></div>
body { text-align: center;
background-image: linear-gradient(to top, #000033, #222255);
background-size: cover;
background-repeat: no-repeat;
overflow-x: hidden;
overflow-y: hidden;
}
#wrapper {
height: 100vh;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
#sky {
width: 100%;
height: 60vh;
font-size: 30pt;
color: white;
}
#normalstar {
width: 2px;
height: 2px;
background-color: white;
border: 4px dotted "#EEEEEE";
border-radius: 1px;
position: absolute;
animation-iteration-count: infinite;
animation-name: zoom_out;
}
#normalstar:nth-of-type(odd) { animation-duration: 15s; }
#normalstar:nth-of-type(even) { animation-duration: 5s; }
@keyframes zoom_out {
0% { transform: scale(1); }
50% {transform: scale(.5);}
100% {transform: scale(1);}
}
function putStars()
{
var w = window.innerWidth;
var h = window.innerHeight;
var i = 1;
//var limit = Math.floor(Math.random() * 1000);
var limit = getRndInteger(400, 900);
var starColor = "orange";
while(i < limit) {
var topPosition = getRndInteger(1, h);
var leftPosition = getRndInteger(1, w);
var scale = getRndInteger(1,10) / 10;
var starRand = getRndInteger(1,3);
if(starRand == 1) {
starColor = "yellow";
}
else if(starRand == 2) {
starColor = "lightblue";
}
else {
starColor = "white";
}
starNormal(starColor, topPosition, leftPosition, scale);
i++;
}
}
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1) ) + min;
}
function starNormal(starColor, topPosition, leftPosition, scale){
var topPosition = topPosition;
var leftPosition = leftPosition;
var scale = scale;
var drawnStar = document.createElement('div');
drawnStar.setAttribute("id", "normalstar");
drawnStar.setAttribute("style", "background-color: " + starColor + "; top: " + topPosition + "px; " +
"left: " + leftPosition + "px; " + "transform: scale(" + scale + ")");
document.getElementById("sky").appendChild(drawnStar);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.