CSS Twinkling Stars

css-twinkling-stars.markdown

CSS Twinkling Stars

A Pen by T. H. Doan on CodePen.

License.

script.js

for (var i = 0; i < 100; i++) {
  var star = '<div class="star" style="animation: twinkle '+((Math.random()*5) + 5)+'s linear '+((Math.random()*5) + 5)+'s infinite; top: '+Math.random()*$(window).height()+'px; left: '+Math.random()*$(window).width()+'px;"></div>';
  $('body').append(star);
}

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.css

body {
  background: black;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(255,255,255,0.0);
  border-radius: 5px;
}

@keyframes twinkle {
  0% {
    transform: scale(1, 1);
    background: rgba(255,255,255,0.0);
    animation-timing-function: ease-in;
  }
  60% {
    transform: scale(0.8, 0.8);
    background: rgba(255,255,255,1);
    animation-timing-function: ease-out;
  }
  80% {
    background: rgba(255,255,255,0.00);
    transform: scale(1, 1);
  }
  100% {
    background: rgba(255,255,255,0.0);
    transform: scale(1, 1);
  }
}