Twinkling Stars - CSS


The twinkling of stars are so beautiful in sky which are caused by the passing of light through different layers of a turbulent atmosphere.

We can create such beautiful nature effect in CSS.




Here is the codes of Twinkling Stars


<!DOCTYPE html>

<html lang="en" >


<head>

  <meta charset="UTF-8">

  <title>CSS Twinkling Stars</title>


</head>

<style>

body {

  background: #241312;

}


.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);

  }

}

</style>

<body>

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

  




<script>

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);

}

</script>


</body>


</html>




 


Post a Comment

Previous Post Next Post