ET phone home? (Only CSS)

HTML
<div class="circu"> <div class="luna"><span class="lunita"></span></div> <div class="arboles"></div> <div class="arboles3"></div> <div class="ibici"> <div class="ca"><span class="ca3"></span></div> <span class="cuerpo"></span> <div class="brazos"></div> <div class="et"><div class="bra"></div></div> <div class="rayos"><div class=rayos3></div></div> <div class="rayos6"><div class=rayos7></div></div> </div>
CSS
body{ background:#0d0630; } .circu{ position:relative; width:700px; height:700px; border-radius:100%; background:#0d0630; border:6px solid #2d1085; margin:90px auto; overflow:hidden; } .luna{ position:relative; width:500px; height:500px; border-radius:100%; background:#d3dbde; margin:30px auto; } .luna::before{ content:""; position:absolute; width:457px; height:457px; background:#ecf0f0; border-radius:100%; margin:5px 12px } .luna::after{ content:""; position:absolute; width:90px; height:90px; background:#bbc4cb; border-radius:100%; margin:90px 300px } .lunita{ position:absolute; width:70px; height:70px; background:#bbc4cb; border-radius:100%; margin:353px 112px } .lunita::before{ content:""; position:absolute; width:50px; height:50px; background:#bbc4cb; border-radius:100%; margin:-271px -40px; } .lunita::after{ content:""; position:absolute; width:50px; height:40px; background:#bbc4cb; border-radius:100%; margin:0px 291px; } .ibici{ position:absolute; width:50px; height:50px; border:5px solid black; border-radius:100%; margin: 0px -132px; animation:run 9s linear infinite; -webkit-animation:run 9s linear infinite; -moz-animation:run 9s linear infinite; -o-animation:run 9s linear infinite; } .ibici::before{ content:""; display:block; width:50px; height:50px; border:5px solid black; border-radius:100%; margin: -5px 65px; } .cuerpo{ position:absolute; width:30px; height:30px; border-radius:100%; background:black; margin: -132px 50px; animation:sube3 .5s alternate infinite; -webkit-animation:sube3 .5s alternate infinite; -moz-animation:sube3 .5s alternate infinite; -o-animation:sube3 .5s alternate infinite; } .cuerpo::before{ content:""; display:block; width:21px; height:50px; border-radius: 9px; background:black; margin:21px -9px; -webkit-transform: rotate(21deg); -moz-transform: rotate(21deg); -ms-transform: rotate(21deg); -o-transform: rotate(21deg); transform: rotate(21deg); } .cuerpo::after{ content:""; display:block; width:12px; height:30px; background:black; margin:-35px -5px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .brazos{ position:absolute; width:12px; height: 30px; background:black; margin: -57px 40px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .brazos::before{ content:""; display:block; width:16px; height: 37px; background:black; margin: -55px 16px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .brazos::after{ content:""; display:block; width:9px; height: 25px; background:black; margin: 27px -12px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .et{ position:absolute; width:36px; height:50px; border-radius:50px 50px 0 0; background:black; margin:-117px 77px; animation:sube .5s alternate infinite; -webkit-animation:sube .5s alternate infinite; -moz-animation:sube .5s alternate infinite; -o-animation:sube .5s alternate infinite; } .et::before{ content:""; display:block; width:21px; height:9px; border-radius:12px 12px 0 0; background:black; margin: 9px 23px } .et::after{ content:""; display:block; width:12px; height:12px; border-radius: 0 0 12px 12px; background:black; margin: -9px 33px } .bra{ position:absolute; width:12px; height:12px; border-radius:100%; border-top:5px solid black; margin: 5px 30px; } .bra::before{ content:""; display:block; width:12px; height:12px; border-radius:100%; border-top:5px solid black; margin: 0px 0px; } .rayos{ position:absolute; width:3px; height:50px; background:#0d0630; margin:-50px 23px; animation:rueda 3s linear infinite; -webkit-animation:rueda 3s linear infinite; -moz-animation:rueda 3s linear infinite; -o-animation:rueda 3s linear infinite; } .rayos::before{ content:""; display:block; width:50px; height:3px; background:#0d0630; margin:23px -23px; } .rayos::after{ content:""; display:block; width:50px; height:3px; background:#0d0630; margin:-25px -23px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .rayos3{ position:absolute; width:50px; height:3px; background:#0d0630; margin:-25px -23px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .rayos6{ position:absolute; width:3px; height:50px; background:#0d0630; margin:-50px 93px; animation:rueda 3s linear infinite; -webkit-animation:rueda 3s linear infinite; -moz-animation:rueda 3s linear infinite; -o-animation:rueda 3s linear infinite; } .rayos6::before{ content:""; display:block; width:50px; height:3px; background:#0d0630; margin:23px -23px; } .rayos6::after{ content:""; display:block; width:50px; height:3px; background:#0d0630; margin:-25px -23px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .rayos7{ position:absolute; width:50px; height:3px; background:#0d0630; margin:-25px -23px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .ca{ position:absolute; width:21px; height:12px; border-radius:0 0 12px 12px; background:black; margin:-70px 30px } .ca::before{ content:""; display:block; width:112px; height:3px; background:black; margin:43px -21px; } .ca::after{ content:""; display:block; width:43px; height:3px; background:black; margin:-64px 3px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .ca3{ position:absolute; width:50px; height:3px; background:black; margin:-73px 25px; -webkit-transform: rotate(-21deg); -moz-transform: rotate(-21deg); -ms-transform: rotate(-21deg); -o-transform: rotate(-21deg); transform: rotate(-21deg); } .ca3::before{ content:""; display:block; width:12px; height:5px; background:black; margin:-9px 17px; border-radius:3px; -webkit-transform: rotate(-21deg); -moz-transform: rotate(-21deg); -ms-transform: rotate(-21deg); -o-transform: rotate(-21deg); transform: rotate(-21deg); } .arboles{ position:absolute; width: 0; height: 0; border-left: 70px solid transparent; border-right: 70px solid transparent; border-bottom: 231px solid #003231; margin:-152px 0px; } .arboles::before{ content:""; position:absolute; width: 0; height: 0; border-left: 70px solid transparent; border-right: 70px solid transparent; border-bottom: 330px solid #004340; margin:-21px 12px} .arboles::after{ content:""; position:absolute; width: 0; height: 0; border-left: 90px solid transparent; border-right: 90px solid transparent; border-bottom: 330px solid #003231; margin:0px 112px} .arboles3{ position:absolute; width: 0; height: 0; border-left: 70px solid transparent; border-right: 70px solid transparent; border-bottom: 231px solid #004340; margin:-152px 550px } .arboles3::before{ content:""; position:absolute; width: 0; height: 0; border-left: 70px solid transparent; border-right: 70px solid transparent; border-bottom: 330px solid #003231; margin:-21px -152px} .arboles3::after{ content:""; position:absolute; width: 0; height: 0; border-left: 90px solid transparent; border-right: 90px solid transparent; border-bottom: 330px solid #004340; margin:0px -271px} @-webkit-keyframes run { 0%{margin:0px -132px;} 25%{margin:-12px 30px;} 35%{margin:-30px 90px;} 35%{margin:-50px 102px;} 50%{margin:-350px 250px;} 65%{margin:-350px 321px;} 75%{margin:-291px 373px;} 85%{margin:-192px 473px;} 100%{margin:0px 600px;} } @-moz-keyframes run { 0%{margin:0px -132px;} 25%{margin:-12px 30px;} 35%{margin:-30px 90px;} 35%{margin:-50px 102px;} 50%{margin:-350px 250px;} 65%{margin:-350px 321px;} 75%{margin:-291px 373px;} 85%{margin:-192px 473px;} 100%{margin:0px 600px;} } @keyframes run { 0%{margin:0px -132px;} 25%{margin:-12px 30px;} 35%{margin:-30px 90px;} 35%{margin:-50px 102px;} 50%{margin:-350px 250px;} 65%{margin:-350px 321px;} 75%{margin:-291px 373px;} 85%{margin:-192px 473px;} 100%{margin:0px 600px;} } @-webkit-keyframes sube { 0%{margin-top:-117px;} 100%{margin-top:-119px;} } @-moz-keyframes sube { 0%{margin-top:-117px;} 100%{margin-top:-119px;} } @keyframes sube { 0%{margin-top:-117px;} 100%{margin-top:-119px;} } @-webkit-keyframes sube3 { 0%{margin-top:-132px;} 100%{margin-top:-134px;} } @-moz-keyframes sube3 { 0%{margin-top:-132px;} 100%{margin-top:-134px;} } @keyframes sube3 { 0%{margin-top:-132px;} 100%{margin-top:-134px; } } @-webkit-keyframes rueda{ 0%{-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);} 100%{-webkit-transform: rotate(360deg); -moz-transform: rotate(-21deg); -ms-transform: rotate(-21deg); -o-transform: rotate(-21deg); transform: rotate(360deg);} } @-moz-keyframes rueda{ 0%{-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);} 100%{-webkit-transform: rotate(360deg); -moz-transform: rotate(-21deg); -ms-transform: rotate(-21deg); -o-transform: rotate(-21deg); transform: rotate(360deg);} } @keyframes rueda{ 0%{-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);} 100%{-webkit-transform: rotate(360deg); -moz-transform: rotate(-21deg); -ms-transform: rotate(-21deg); -o-transform: rotate(-21deg); transform: rotate(360deg);} }
JAVASCRIPT
Expand for more options Login