Stars animation using javaScript only.

here is a beautiful stars animation by Learn code free online.



YummyCake-Restaurant template 

  <body class="sky">
    <div class="night-sky container-fluid"></div>
    
   </body>

javascript code to create stars:


  <script>

    var timesRun = 0;
    var stopinterv = setInterval(function twinkling(){
      timesRun += 1;
      if(timesRun === 50){
        clearInterval(stopinterv);
      }
      for(let i = 0; i < 5; i++){
        var starCounts =document.createElement('i');
        starCounts.className = 'fa-solid fa-asterisk';
        var wh = Math.floor(Math.random(1,10)*15);
        var $x = Math.floor(Math.random(0,4)*100);
        var $y = Math.floor(Math.random(0,4)*100);
  
        starCounts.style.position = 'relative';
        starCounts.style.fontSize = wh + 'px';
        starCounts.style.left = $x + 'vw';
        starCounts.style.top = $y + 'vh';
        starCounts.style.color = 'white';
        document.querySelector('.night-sky').appendChild(starCounts);
      }
    }, 100)
  </script>


here we are done with html and JS code now let's see css style. see the below CSS code. 


  *{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.sky{
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle, rgba(3,3,48,1) 0%, rgba(0,0,0,1) 100%);
}
.night-sky{
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.night-sky i.fa-solid.fa-asterisk{
    text-shadow: 0px 0px 10px white;
    animation:fade 1s linear infinite;
}

@keyframes fade{
    0%,100%{
        transform: scale(.1);
    }
    50%{
        transform: scale(1);
    }
}

If you like our efforts, keep coming again on our page. Thanks.