LIte

index.html

<div>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div></div>
            </div> 
          </div>
        </div> 
      </div>
    </div> 
  </div>
</div> 

LIte.markdown

LIte

A Pen by Mostafa on CodePen.

License.

script.js

 // animate by css
 // For best results use the Chrome

style.css

body{
  background:rgb(0,0,0);
  overflow:hidden;
}

div{
  width:0px;
  height:0px;
  position:absolute;
  top:50%;
  left:50%;
  box-shadow:0px 0px 50px 10px rgba(255,255,255,0.9),0px 0px 100px 20px rgba(255,255,255,0.9),0px 0px 150px 70px rgba(200,255,200,0.9),0px 0px 200px 100px rgba(10,150,250,0.9);
  -webkit-animation: rot 2.5s infinite ease-out alternate;
  animation: rot 2.5s infinite ease-out alternate;
  border-radius:1%;
} 

div > div{
  -webkit-animation: roty 5s infinite ease-in alternate;
  animation: roty 5s infinite ease-in alternate;
  width:40px;
  height:40px;
}
 
@-webkit-keyframes rot{
  0%{
    transform:scale(0.5) 
  }
}

@-webkit-keyframes roty{
  0%{
    transform:scale(0);
  }
  100%{
    transform:scale(4) 
  }
}

@keyframes rot{
  0%{
    transform:scale(0.5) 
  }
}

@keyframes roty{
  0%{
    transform:scale(0);
  }
  100%{
    transform:scale(4) 
  }
}