Sun Animation
by Keith Jeter
HTML
<div id="sun">
<div id="rings">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>CSS
body, html{
background: #000000;
}
/* code for the sun */
#sun{
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
width: 300px;
height: 300px;
}
#sun *, #sun *:before, #sun *:after{
position: absolute;
}
/* code for the rings */
#rings{
top: 50%;
left: 50%;
z-index: 1;
}
#rings div:before, #rings div:after{
content: "";
z-index: 2;
top: 0;
left: 0;
height: inherit;
width: inherit;
background: inherit;
}
#rings div:before{
transform: rotate(60deg);
}
#rings div:after{
transform: rotate(-60deg);
}
#rings div:nth-child(even){
animation: rotateR 12s infinite linear;
}
#rings div:nth-child(odd){
animation: rotateL 12s infinite linear;
transform: rotate(15deg);
}
#rings div:nth-child(1){
animation-duration: 45s;
backgrond: rgba(255, 230, 84, 0.5);
width: 200px;
height: 200px;
margin: -100px 0 0 -100px;
}
#rings div:nth-child(2){
animation-duration: 49s;
background: rgba(255, 185, 6, 0.5);
width: 190px;
height: 190px;
margin: -95px 0 0 -95px;
}
#rings div:nth-child(3){
animation-duration: 56s;
background: rgba(255, 130, 5, 0.5);
width: 180px;
height: 180px;
margin: -90px 0 0 -90px;
}
#ringsv idiv:nth-child(4){
animation-duration: 93s;
background: rgba(255, 90, 0, 0.5);
width: 170px;
height: 170px;
margin: -85px 0 0 -85px;
}
/* animations */
@-webkit-keyframes rotateR{
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotateR{
from{
-moz-transform: rotate(0deg);
}
to{
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes rotateR{
from{
-ms-transform: rotate(0deg);
}
to{
-ms-transform: rotate(360deg);
}
}
@-o-keygrames rotateR{
from{
-o-transform: rotate(0deg);
}
to{
-o-transform: rotate(360deg);
}
}
@keyframes rotateR{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
@-webkit-keyframes rotateL{
from{
-webkit-transform: rotate(360deg);
}
to{
-webkit-transform: rotate(0deg);
}
}
@-moz-keyframes...