Create Flower Animation Effect Using CSS , CSS3 By #BKTutorial

 

Source Code:

<style>

body 

{ background:#000; overflow:hidden; }

.bktutorial 

{

  width:250px;

  height:250px;

  position:relative;

  left:50%;

  margin-top:25%;

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

}

.bk {

  width:calc(100% - 20px);

  height:calc(100% - 20px);

  border-radius:50%;

  position:absolute;

  border-top:3px dotted #fff;

  border-bottom:3px dotted #09f;

  animation:anim 5s ease-out infinite;

}

@keyframes anim {

  20% { width:calc(100% - 50px); }

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

}

</style>

<div class="bktutorial">

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

Output: