diaframa concept

Transition on window load.

by Sanjay

HTML

<div id="box">CSS3</div>

CSS

#box {
  display: block;
box-shadow: inset 0 140px 0 rgba(200, 200, 0, 0.5), inset 140px 0 0 rgba(150, 150, 0, 0.5), inset 0 -140px 0 rgba(200, 100, 0, 0.5), inset -140px 0 0 rgba(250, 250, 0, 0.5);
width: 280px;
height: 280px;
margin: 0;
border-radius: 100%;
text-align: center;
line-height: 280px;
  -webkit-font-smoothing: antialiased;
  font-size: 2em;
  color: #ccc;
}
#box:after {
  -webkit-transform: rotateZ(45deg);
box-shadow: inset 0 140px 0 rgba(200, 200, 0, 0.5), inset 140px 0 0 rgba(150, 150, 0, 0.5), inset 0 -140px 0 rgba(200, 100, 0, 0.5), inset -140px 0 0 rgba(250, 250, 0, 0.5);
position: absolute;
content: "";
width: 280px;
height: 280px;
margin: 0;
border-radius: 100%;
left: 0px;
}
#box:hover {
  background: #fff;
  box-shadow: inset 0 14px 0 #fafa00, inset 14px 0 0 #fac800, inset 0 -14px 0 #fa9600, inset -14px 0 0 #fa6400;
  color: #222;
}
#box:hover:after {
  box-shadow: inset 0 14px 0 #fafa00, inset 14px 0 0 #fac800, inset 0 -14px 0 #fa9600, inset -14px 0 0 #fa6400;
}

JavaScript

jQuery('#box').css({'-webkit-transition': '1s box-shadow'}); jQuery('#box:after').css({'-webkit-transition': '1s box-shadow'});