New playground

HTML
<div class="contenedor"> <div class="flor"> <div class="flor1"></div> <div class="flor2"></div> </div> <div class="butter"><span class="ala"></span><span class="butter3"></span></div> <div class="butter7"><span class="ala3"></span><span class="butter5"></span></div> </div>
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;} }
JAVASCRIPT
Expand for more options Login