How to Create Star Animation Effect Using CSS | #bktuorial By #BKTutorial

 

Source Code:

<style>

body 

{ background:#000; overflow:hidden; }

.bktutorial

{

  width:200px;

  height:10px;

  position:absolute;

  top:50%;

  left:50%;

  transform:translate(-50%,-50%);

}

/*.bk-box 

{ width:100%;  height:100%;  position:relative; }*/

.bk

{

  position:absolute;

  width:calc(100% - 20px);

  height:calc(100% - 20px);

  border:3px solid #FFF;

  border-top:3px solid #0F0; 

  border-radius:50%;

  animation:anim 15s alternate infinite;

}

@keyframes anim {

   30%{width:calc(100% - 10px);}

   100% { transform:rotate(360deg); }

}

</style>

<div class="bktutorial">

  <div class="bk-box">

    <div class="bk">

      <div class="bk">

       <div class="bk">

        <div class="bk">

         <div class="bk">

          <div class="bk">

           <div class="bk">

            <div class="bk">

             <div class="bk">

             </div>

             </div>

            </div>

           </div>

          </div>

         </div>

        </div>

       </div>

      </div>

     </div>

</div>

Output: