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);}
}
