CSS
html,body,div {width:100%;height:100%;}
body {background:#2f2933;overflow:hidden;}
div {
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin-right:auto;
margin-left:auto;
margin-top:auto;
margin-bottom:auto;
}
.container,.center6 {
background-color:#ffffa6;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffa6),color-stop(1, #bdf271));
background-image: -o-linear-gradient(bottom, #ffffa6 0%, #bdf271 100%);
background-image: -moz-linear-gradient(bottom, #ffffa6 0%, #bdf271 100%);
background-image: -webkit-linear-gradient(bottom, #ffffa6 0%, #bdf271 100%);
background-image: -ms-linear-gradient(bottom, #ffffa6 0%, #bdf271 100%);
background-image: linear-gradient(to bottom, #ffffa6 0%, #bdf271 100%);
}
.container2,.center5 {
background-color:#bdf271;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #bdf271),color-stop(1, #29d9c2));
background-image: -o-linear-gradient(bottom, #bdf271 0%, #29d9c2 100%);
background-image: -moz-linear-gradient(bottom, #bdf271 0%, #29d9c2 100%);
background-image: -webkit-linear-gradient(bottom, #bdf271 0%, #29d9c2 100%);
background-image: -ms-linear-gradient(bottom, #bdf271 0%, #29d9c2 100%);
background-image: linear-gradient(to bottom, #bdf271 0%, #29d9c2 100%);
-webkit-animation-delay:200ms;
-moz-animation-delay:200ms;
-o-animation-delay:200ms;
animation-delay:200ms;
}
.container3,.center4 {
background-color:#29d9c2;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #29d9c2),color-stop(1, #01a2a6));
background-image: -o-linear-gradient(bottom, #29d9c2 0%, #01a2a6 100%);
background-image: -moz-linear-gradient(bottom, #29d9c2 0%, #01a2a6 100%);
background-image: -webkit-linear-gradient(bottom, #29d9c2 0%, #01a2a6 100%);
background-image: -ms-linear-gradient(bottom, #29d9c2 0%, #01a2a6 100%);
background-image: linear-gradient(to bottom, #29d9c2 0%, #01a2a6 100%);
-webkit-animation-delay:400ms;
-moz-animation-delay:400ms;
-o-animation-delay:400ms;
animation-delay:400ms;
}
.container4,.center {
background-color:#01a2a6;
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #01a2a6),color-stop(1, #2f2933));
background-image: -o-linear-gradient(bottom, #01a2a6 0%, #2f2933 100%);
background-image: -moz-linear-gradient(bottom, #01a2a6 0%, #2f2933 100%);
background-image: -webkit-linear-gradient(bottom, #01a2a6 0%, #2f2933 100%);
background-image: -ms-linear-gradient(bottom, #01a2a6 0%, #2f2933 100%);
background-image: linear-gradient(to bottom, #01a2a6 0%, #2f2933 100%);
-webkit-animation-delay:600ms;
-moz-animation-delay:600ms;
-o-animation-delay:600ms;
animation-delay:600ms;
}
.container,.container2,.container3,.container4 {
-webkit-animation:container 1s infinite linear;
-moz-animation:container 1s infinite linear;
-o-animation:container 1s infinite linear;
animation:container 1s infinite linear;
opacity:0.5;
}
.container{
width:400px;
height:400px;
border-radius:200px;
z-index:6;
}
.container2 {
width:500px;
height:500px;
border-radius:250px;
z-index:5;
}
.container3 {
width:600px;
height:600px;
border-radius:300px;
z-index:4;
}
.container4 {
width:700px;
height:700px;
border-radius:350px;
z-index:3;
}
.star,.star:after,.star2,.star2:after,.star3,.star3:after,.star4,.star4:after,.star5,.star5:after,.star6,.star6:after {
width: 0;
height: 0;
border-left: 130px solid transparent;
border-right: 130px solid transparent;
}
.star,.star2,.star3,.star4,.star5,.star6 {top:-5%;}
.star:after,.star2:after,.star3:after,.star4:after,.star5:after,.star6:after {
position: absolute;
content: "";
top: 60px;
left: -130px;
}
.star {border-bottom: 250px solid #2f2933;z-index:12;}
.star:after {border-top: 250px solid #2f2933;}
.star2 {
border-bottom: 250px solid #ac0000;
z-index:11;
-webkit-transform: rotate(-30deg) translateX(-15px) translateY(0px);
-moz-transform: rotate(-30deg) translateX(-15px) translateY(0px);
-o-transform: rotate(-30deg) translateX(-15px) translateY(0px);
transform: rotate(-30deg) translateX(-15px) translateY(0px);
}
.star2:after {border-top: 250px solid #ac0000;}
.star3{
border-bottom: 250px solid #800000;
z-index:10;
-webkit-transform: rotate(-35deg) translateX(-15px) translateY(0px);
-moz-transform: rotate(-35deg) translateX(-15px) translateY(0px);
-o-transform: rotate(-35deg) translateX(-15px) translateY(0px);
transform: rotate(-35deg) translateX(-15px) translateY(0px);
}
.star3:after {border-top: 250px solid #800000;}
.star4{
border-bottom: 250px solid #660000;
z-index:9;
-webkit-transform: rotate(-40deg) translateX(-15px) translateY(0px);
-moz-transform: rotate(-40deg) translateX(-15px) translateY(0px);
-o-transform: rotate(-40deg) translateX(-15px) translateY(0px);
transform: rotate(-40deg) translateX(-15px) translateY(0px);
}
.star4:after {border-top: 250px solid #660000;}
.star5{
border-bottom: 250px solid #590000;
z-index:8;
-webkit-transform: rotate(-45deg) translateX(-15px) translateY(0px);
-moz-transform: rotate(-45deg) translateX(-15px) translateY(0px);
-o-transform: rotate(-45deg) translateX(-15px) translateY(0px);
transform: rotate(-45deg) translateX(-15px) translateY(0px);
}
.star5:after {border-top: 250px solid #590000;}
.star6{
border-bottom: 250px solid #4d0000;
z-index:7;
-webkit-transform: rotate(-50deg) translateX(-15px) translateY(0px);
-moz-transform: rotate(-50deg) translateX(-15px) translateY(0px);
-o-transform: rotate(-50deg) translateX(-15px) translateY(0px);
transform: rotate(-50deg) translateX(-15px) translateY(0px);
}
.star6:after {border-top: 250px solid #4d0000;}
.center,.center2,.center3,.center4,.center5,.center6 {
-webkit-animation:container 1s infinite linear;
-moz-animation:container 1s infinite linear;
-o-animation:container 1s infinite linear;
animation:container 1s infinite linear;
opacity:0.5;
}
.center {
width:60px;
height:60px;
border-radius:30px;
z-index:13;
}
.center2 {
width:50px;
height:50px;
border-radius:25px;
background:#2f2933;
z-index:14;
}
.center3 {
width:40px;
height:40px;
border-radius:20px;
background:#2f2933;
z-index:15;
}
.center4 {
width:30px;
height:30px;
border-radius:15px;
z-index:16;
}
.center5 {
width:20px;
height:20px;
border-radius:10px;
z-index:17;
}
.center6 {
width:10px;
height:10px;
border-radius:5px;
z-index:18;
}
/*animation container*/
@-webkit-keyframes container {
0% {-webkit-transform:rotate(0deg);transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);transform:rotate(360deg);}
}
@-moz-keyframes container {
0% {-moz-transform:rotate(0deg);transform:rotate(0deg);}
100% {-moz-transform:rotate(360deg);transform:rotate(360deg);}
}
@-o-keyframes container {
0% {-o-transform:rotate(0deg);transform:rotate(0deg);}
100% {-o-transform:rotate(360deg);transform:rotate(360deg);}
}
@keyframes container {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
