CodePen Embed - Animated stars background

<div class='intro'>
  <h3>Simple background full of animated stars</h3>
  <div class='customization-panel'>
    <div class='customization-title'>Customization</div>
    <div class='customization-js'>
      <div>In the js</div>
      <ul>
        <li>Number  of stars</li>
        <li>Min and max radius of the stars</li>
        <li>Rotation speed</li>
        <li>Area to be filled with stars</li>
      </ul>
    </div>
    <div class='customization-css'>
      <div>In the css</div>
      <ul>
        <li>Color of th star</li>
        <li>Orbit radius<li>
      </ul>
    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Jura|Rajdhani');

body{background-color: #000;}
.star{display: block; background-color: #fff; position: absolute; border-radius: 100%; animation-timing-function: linear;animation-iteration-count: infinite;}

@keyframes move_right {
   from { transform: rotate(0deg) translateX(8px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(8px) rotate(-360deg); }
}

@keyframes move_left {
   from { transform: rotate(0deg) translateX(8px) rotate(0deg); }
    to   { transform: rotate(-360deg) translateX(8px) rotate(360deg); }
}

/* the intro panel */
.intro{color:#63baf7; margin: 1em; font-family: Jura; font-size: 11pt}
.intro h3{font-size: 16pt; margin-bottom: 0}
.intro ul {padding-left: .3em;}
.intro li {list-style-type: none; margin-left: .5em}
.intro .customization-panel{display: flex;flex-wrap: wrap;}
.intro .customization-title{flex-basis : 100%;padding: 10px 0; font-size: 14pt; text-shadow: 0 0 .3em #63baf7; color: #fff;}
.intro .customization-js{margin-right: 2em;}

var number_of_star = 150;

var random_number = function(min, max){
		return Math.floor(Math.random() * (max - min + 1)) + min;
};

var createStars = function(){
	var star_rotation = 'move_right;';
	for(var i=0; i<number_of_star; i++){
		rot= (star_rotation=='move_right;'?'move_left;':'move_right;');
		var star_top = random_number(0,document.documentElement.clientHeight);
		var star_left = random_number(0,document.documentElement.clientWidth);
		var star_radius = random_number(0,4);
		var  star_duration= random_number(6,16);

		document.body.innerHTML += "<div class='star' style='top: "+star_top+"px; left: "+star_left+"px; width: "+star_radius+"px; height: "+star_radius+"px; "+
		"animation-name:"+star_rotation+"; animation-duration: "+star_duration+"s;'></div>";
	}
};

createStars();

This Pen is owned by Alessandro on CodePen.

See more by @afranceschetti on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.