<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);
			}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.