CSS
body{
background:black;
}
.contenedor{
position:relative;
width:600px;
height:600px;
border-radius:100%;
background:#070707;
margin:231px auto;
}
.butter{
position:absolute;
width:35px;
height:50px;
border-radius:100%;
background:#EF0B6A;
margin:155px 400px;
transform:rotate(-12deg);
-moz-transform:rotate(-12deg);
-webkit-transform:rotate(-12deg);
animation:sube .9s alternate infinite;
-moz-animation:sube .9s alternate infinite;
-webkit-animation:sube .9s alternate infinite;
}
.ala{
position:absolute;
width:45px;
height:60px;
border-radius:100%;
background:#E50B6D;
margin:9px 12px;
transform:rotate(53deg);
-moz-transform:rotate(53deg);
-webkit-transform:rotate(53deg);
animation:sube7 .9s alternate infinite;
-moz-animation:sube7 .9s alternate infinite;
-webkit-animation:sube7 .9s alternate infinite;
}
.ala::before{
content:"";
position:absolute;
width:40px;
height:60px;
border-radius:100%;
background:#E50B6D;
opacity:.7;
margin:5px 12px;
transform:rotate(80deg);
-moz-transform:rotate(80deg);
-webkit-transform:rotate(80deg);
}
.butter3{
position:absolute;
width:40px;
height:9px;
border-radius:100%;
background:white;
transform:rotate(50deg);
-moz-transform:rotate(50deg);
-webkit-transform:rotate(50deg);
margin:57px -3px;
}
.butter3::before{
content:"";
display:block;
width:12px;
height:12px;
border-radius:100%;
background: white;
margin:0px -9px
}
.butter3::after{
content:"";
display:block;
width:21px;
height:12px;
border-radius:100%;
border-top:3px solid white;
margin:-9px -21px
}
.butter7{
position:absolute;
width:35px;
height:50px;
border-radius:100%;
background:#05abe0;
margin:300px 132px;
transform:rotate(12deg);
-moz-transform:rotate(12deg);
-webkit-transform:rotate(12deg);
animation:sube3 .9s alternate infinite;
-moz-animation:sube3 .9s alternate infinite;
-webkit-animation:sube3 .9s alternate infinite;
}
.ala3{
position:absolute;
width:45px;
height:60px;
border-radius:100%;
background:#1AC2ED;
margin:12px -7px;
transform:rotate(-21deg);
-moz-transform:rotate(-21deg);
-webkit-transform:rotate(-21deg);
animation:sube9 .9s alternate infinite;
-moz-animation:sube9 .9s alternate infinite;
-webkit-animation:sube9 .9s alternate infinite;
}
.ala3::before{
content:"";
position:absolute;
width:40px;
height:60px;
border-radius:100%;
background:#05B2C1;
opacity:.7;
margin:12px -7px;
transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
}
.butter5{
position:absolute;
width:40px;
height:9px;
border-radius:100%;
background:white;
transform:rotate(-50deg);
-moz-transform:rotate(-50deg);
-webkit-transform:rotate(-50deg);
margin:65px 14px
}
.butter5::before{
content:"";
display:block;
width:12px;
height:12px;
border-radius:100%;
background: white;
margin:0px 33px
}
.butter5::after{
content:"";
display:block;
width:21px;
height:12px;
border-radius:100%;
border-top:3px solid white;
margin:-12px 40px
}
.flor{
position:absolute;
width:3px;
height:450px;
background:white;
opacity:.5;
margin:142px 295px;
}
.flor1{
position:absolute;
width:70px;
height:70px;
border-radius:3px 121px 12px 121px;
background:#05abe0;
transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
.flor1::before{
content:"";
position:absolute;
width:70px;
height:70px;
border-radius:3px 121px 12px 121px;
background:#07C7F7;
transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
margin:0px 50px
}
.flor2{
position:absolute;
width:70px;
height:70px;
border-radius:3px 121px 12px 121px;
background:#E50B6D;
transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
margin:192px -70px
}
.flor2::before{
content:"";
position:absolute;
width:70px;
height:70px;
border-radius:3px 121px 12px 121px;
background:#EF0B6A;
transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
margin:0px 50px
}
.circ1, .circ2, .circ3, .circ4, .circ5, .circ6{
border-radius:100%;
background: rgba(255,255,255,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 23%, rgba(115,115,115,1) 40%, rgba(115,115,115,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(23%, rgba(255,255,255,1)), color-stop(40%, rgba(115,115,115,1)), color-stop(100%, rgba(115,115,115,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 23%, rgba(115,115,115,1) 40%, rgba(115,115,115,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 23%, rgba(115,115,115,1) 40%, rgba(115,115,115,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 23%, rgba(115,115,115,1) 40%, rgba(115,115,115,1) 100%);
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 23%, rgba(115,115,115,1) 40%, rgba(115,115,115,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#737373', GradientType=1 );
box-shadow:0px 0 12px #FFf;
-moz-box-shadow:0px 0 21px #FFf;
-ms-box-shadow:0px 0 21px #FFf;
-o-box-shadow:0px 0 21px #FFf;
-webkit-box-shadow:0px 0 12px #FFf;
}
.circ1{
position:absolute;
width:12px;
height:12px;
margin:212px 90px;
animation: enciende alternate infinite .9s;
-moz-animation: enciende alternate infinite .9s;
-webkit-animation: enciende alternate infinite .9s;
}
.circ2{
position:absolute;
width:9px;
height:9px;
margin:231px 80px;
animation: enciende alternate infinite 1s;
-moz-animation: enciende alternate infinite 1s;
-webkit-animation: enciende alternate infinite 1s;
}
.circ3{
position:absolute;
width:6px;
height:6px;
margin:247px 67px;
animation: enciende alternate infinite 2s;
-moz-animation: enciende alternate infinite 2s;
-webkit-animation: enciende alternate infinite 2s;
}
.circ4{
position:absolute;
width:12px;
height:12px;
margin:70px 370px;
animation: enciende alternate infinite .9s;
-moz-animation: enciende alternate infinite .9s;
-webkit-animation: enciende alternate infinite .9s;
}
.circ5{
position:absolute;
width:9px;
height:9px;
margin:90px 385px;
animation: enciende alternate infinite 1s;
-moz-animation: enciende alternate infinite 1s;
-webkit-animation: enciende alternate infinite 1s;
}
.circ6{
position:absolute;
width:6px;
height:6px;
margin:112px 387px;
animation: enciende alternate infinite 2s;
-moz-animation: enciende alternate infinite 2s;
-webkit-animation: enciende alternate infinite 2s;
}
.circulos{
position:absolute;
margin:0px 700px;
}
@keyframes sube{
0%{margin: 152px 370px;}
100%{margin: 162px 370px;}
}
@-moz-keyframes sube{
0%{margin: 152px 370px;}
100%{margin: 162px 370px;}
}
@-webkit-keyframes sube{
0%{margin: 152px 370px;}
100%{margin: 162px 370px;}
}
@keyframes sube3{
0%{margin: 303px 162px;}
100%{margin: 291px 162px;}
}
@-moz-keyframes sube3{
0%{margin: 303px 162px;}
100%{margin: 291px 162px;}
}
@-webkit-keyframes sube3{
0%{margin: 303px 162px;}
100%{margin: 291px 162px;}
}
@keyframes sube7{
0%{ transform:rotate(53deg);
-moz-transform:rotate(53deg);
-webkit-transform:rotate(53deg);}
100%{transform:rotate(73deg);
-moz-transform:rotate(73deg);
-webkit-transform:rotate(73deg);}
}
@-moz-keyframes sube7{
0%{ transform:rotate(53deg);
-moz-transform:rotate(53deg);
-webkit-transform:rotate(53deg);}
100%{transform:rotate(73deg);
-moz-transform:rotate(73deg);
-webkit-transform:rotate(73deg);}
}
@-webkit-keyframes sube7{
0%{ transform:rotate(53deg);
-moz-transform:rotate(53deg);
-webkit-transform:rotate(53deg);}
100%{transform:rotate(73deg);
-moz-transform:rotate(73deg);
-webkit-transform:rotate(73deg);}
}
@keyframes sube9{
0%{ transform:rotate(-21deg);
-moz-transform:rotate(-21deg);
-webkit-transform:rotate(-21deg);}
100%{transform:rotate(-33deg);
-moz-transform:rotate(-33deg);
-webkit-transform:rotate(-33deg);}
}
@-webkit-keyframes sube9{
0%{ transform:rotate(-21deg);
-moz-transform:rotate(-21deg);
-webkit-transform:rotate(-21deg);}
100%{transform:rotate(-33deg);
-moz-transform:rotate(-33deg);
-webkit-transform:rotate(-33deg);}
}
@-moz-keyframes sube9{
0%{ transform:rotate(-21deg);
-moz-transform:rotate(-21deg);
-webkit-transform:rotate(-21deg);}
100%{transform:rotate(-33deg);
-moz-transform:rotate(-33deg);
-webkit-transform:rotate(-33deg);}
}
@keyframes enciende{
0%{opacity:0;}
100%{opacity:1;}
}
@-moz-keyframes enciende{
0%{opacity:0;}
100%{opacity:1;}
}
@-webkit-keyframes enciende{
0%{opacity:0;}
100%{opacity:1;}
}
