Aliens city... (Only CSS)
HTML
<div class="circu">
<div class="suelo"></div>
<div class="edi">
<ul class="vent">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="edi3">
<ul class="vent3">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="circ"></div>
<div class="asc"></div>
<div class="edi6">
<ul class="vent6">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<ul class="arboles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="luna"></div>
<div class="road">
<ul class="lineas">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="ovni"></div>
</div>
CSS
body{
background:#3d2671;
}
.circu{
position:relative;
width:500px;
height:500px;
border-radius:100%;
border:9px solid #040b03;
margin:221px auto;
background:#1a002f;
overflow:hidden;
}
.suelo{
position:relative;
width:500px;
height:251px;
border-radius:0 0 500px 500px;
background:#3d2671;
margin:271px auto;
}
.edi{
position:absolute;
width:70px;
height:152px;
background:#493dcd;
margin:-635px 70px
}
.edi::before{
content:"";
display:block;
width: 0;
height: 0;
border-bottom: 50px solid #7744bb;
border-left: 70px solid transparent;
margin:-30px 0px
}
ul.vent{
display:block;
width:50px;
height:132px;
list-style:none;
margin: 35px -27px
}
ul.vent li{
display:inline-block;
width:12px;
height:12px;
background:#fff504;
}
.edi3{
position:absolute;
width: 70px;
height: 192px;
background: #30084a;
margin:-600px 201px;
-moz-border-radius: 100px / 30px;
-webkit-border-radius: 100px / 30px;
border-radius: 100px / 30px;
}
.edi3:after {
content: '';
position: absolute;
left: 0px;
top: 0px;
width: 70px;
height: 21px;
background: #553377;
-moz-border-radius: 100px / 30px;
-webkit-border-radius: 100px / 30px;
border-radius: 100px / 30px;
}
ul.vent3{
display:block;
width:50px;
height:132px;
list-style:none;
margin: 35px -28px
}
ul.vent3 li{
display:inline-block;
width:21px;
height:12px;
background:#fff504;
}
ul.vent3 li:nth-child(1){
background:#8cfffd;
}
ul.vent3 li:nth-child(2){
background:#ff4573;
}
ul.vent3 li:nth-child(3){
background:gray;
}
ul.vent3 li:nth-child(4){
background:#8cfffd;
}
ul.vent3 li:nth-child(5){
background:#8cfffd;;
}
ul.vent3 li:nth-child(6){
background:#ff4573;
}
ul.vent3 li:nth-child(7){
background:#ff4573;
}
ul.vent3 li:nth-child(8){
background:gray;
}
ul.vent3 li:nth-child(9){
background:#8cfffd;;
}
ul.vent3 li:nth-child(10){
background:#ff4573;
}
ul.vent3 li:nth-child(11){
background:gray;
}
ul.vent3 li:nth-child(12){
background:gray;
}
ul.vent3 li:nth-child(14){
background:#8cfffd;;
}
ul.vent3 li:nth-child(13){
background:#ff4573;
}
.asc{
position:absolute;
width:21px;
height:172px;
background:#5f5ba6;
margin:-590px 271px;
}
.asc::before{
content:"";
display:block;
width:17px;
height:21px;
background:rgba(255,255,255,.3);
border:2px solid cyan;
animation: sube 12s alternate infinite;
-moz-animation: sube 12s alternate infinite;
-webkit-animation: sube 12s alternate infinite;
-o-animation: sube 12s alternate infinite;
margin:150px 0;
}
.circ{
position:absolute;
width:65px;
height:19px;
border-radius:100%;
border:2px solid cyan;
margin:-603px 201px;
animation: bo 1s alternate infinite;
-moz-animation: bo 1s alternate infinite;
-webkit-animation: bo 1s alternate infinite;
-o-animation: bo 1s alternate infinite;
}
.circ::before{
content:"";
display:block;
width:50px;
height:12px;
border-radius:100%;
border:2px solid #ff6666;
margin:1px 5px
}
.circ::after{
content:"";
display:block;
width:21px;
height:5px;
border-radius:100%;
border:2px solid yellow;
margin:-14px 19px
}
.edi6{
position:absolute;
border-bottom: 152px solid #663399;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
height: 0;
width: 70px;
margin:-630px 345px;
}
.edi6::before{
content:"";
display:block;
width: 0;
height: 0;
border-bottom: 50px solid #30084a;
border-right: 70px solid transparent;
margin:-50px 0
}
ul.vent6{
display:block;
width:50px;
height:132px;
list-style:none;
margin: 53px -40px
}
ul.vent6 li{
display:inline-block;
width:70px;
height:12px;
border-bottom:2px solid #30084a;;
}
ul.vent6 li::before{
content:"";
display:block;
width:30px;
height:12px;
background:#ff6666;
}
ul.vent6 li::after{
content:"";
display:block;
width:30px;
height:12px;
background:#00caf0;
margin:-12px 40px
}
ul.arboles{
display:block;
width:500px;
height:291px;
list-style:none;
margin:-553px -30px
}
ul.arboles li{
display:inline-block;
width:21px;
height:21px;
border-radius:100%;
background:white;
margin-left:5px
}
ul.arboles li::before{
content:"";
display:block;
width:3px;
height:21px;
background:black;
margin:21px 8px
}
ul.arboles li:nth-child(1){
background:cyan;
}
ul.arboles li:nth-child(2){
background:#ff6666;
}
ul.arboles li:nth-child(5){
background:cyan;
}
ul.arboles li:nth-child(6){
background:#ff6666;
}
ul.arboles li:nth-child(7){
background:yellow;
}
ul.arboles li:nth-child(10){
background:#ff6666;
}
ul.arboles li:nth-child(11){
background:yellow;
}
ul.arboles li:nth-child(12){
background:cyan;
}
ul.arboles li:nth-child(14){
background:yellow;
}
ul.arboles li:nth-child(15){
background:#ff6666;
}
ul.arboles li:nth-child(16){
background:cyan;
}
.luna{
position:relative;
width:121px;
height:121px;
border-radius:100%;
background:white;
margin:30px auto;
}
.road{
position:relative;
width:500px;
height:121px;
background:#4444bc;
margin:271px auto;
}
ul.lineas{
display:block;
width:300px;
height:90px;
list-style:none;
margin:212px 90px;
animation: corre 5s alternate infinite;
-moz-animation: corre 5s alternate infinite;
-webkit-animation: corre 5s alternate infinite;
-o-animation: corre 5s alternate infinite;
}
ul.lineas li{
display:inline-block;
width:70px;
height:1px;
background:#49f4b5;
}
ul.lineas li:nth-child(1){
margin:3px 0px;
}
ul.lineas li:nth-child(2){
margin:-9px 0px
}
ul.lineas li:nth-child(3){
margin:-21px 21px;
}
ul.lineas li:nth-child(4){
margin:-9px 30px;
}
ul.lineas li:nth-child(5){
margin:-30px 45px;
}
ul.lineas li:nth-child(6){
margin:-12px 30px;
}
ul.lineas li:nth-child(7){
margin:0 -30px;
}
ul.lineas li:nth-child(8){
margin:-21px -7px;
}
ul.lineas li:nth-child(9){
margin:0px -12px;
}
ul.lineas li:nth-child(10){
margin:-9px -7px;
}
ul.lineas li:nth-child(11){
margin:0px -12px;
}
ul.lineas li:nth-child(12){
margin:-21px -7px;
}
.ovni{
position:absolute;
width:50px;
height:12px;
border-radius:100%;
background:cyan;
margin: -700px -30px;
animation: corre3 12s alternate infinite;
-moz-animation: corre3 12s alternate infinite;
-webkit-animation: corre3 12s alternate infinite;
-o-animation: corre3 12s alternate infinite;
}
.ovni::before{
content:"";
display:block;
width:33px;
height:21px;
border-radius: 40px 40px 0px 0px;
background:#ff6666;
margin:-19px 8px;
}
.ovni::after{
content:"";
display:block;
width:12px;
height:13px;
border-radius: 100%;
border-left:3px solid pink;
margin:3px 13px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
@-webkit-keyframes sube {
0% {
margin-top:150px; }
25% {
margin-top:90px; }
35% {
margin-top:90px; }
50% {
margin-top:30px; }
75% {
margin-top:0px; }
100% {
margin-top:0px; } }
@-moz-keyframes sube {
0% {
margin-top:150px; }
25% {
margin-top:90px; }
35% {
margin-top:90px; }
50% {
margin-top:30px; }
75% {
margin-top:0px; }
100% {
margin-top:0px; } }
@keyframes sube {
0% {
margin-top:150px; }
25% {
margin-top:90px; }
35% {
margin-top:90px; }
50% {
margin-top:30px; }
75% {
margin-top:0px; }
100% {
margin-top:0px; } }
@-webkit-keyframes corre{
0% {
margin-left:50px; }
100% {
margin-left:112px; } }
@-moz-keyframes corre{
0% {
margin-left:50px; }
100% {
margin-left:112px; } }
@keyframes corre{
0% {
margin-left:50px; }
100% {
margin-left:112px; } }
@-webkit-keyframes bo {
0% {
opacity:0; }
100% {
opacity:1; } }
@-moz-keyframes bo {
0% {
opacity:0; }
100% {
opacity:1; } }
@keyframes bo {
0% {
opacity:0; }
100% {
opacity:1; } }
@-webkit-keyframes corre3{
0% {
margin:-700px -30px; }
25% {
margin:-700px 12px; }
35% {
margin:-712px 90px; }
50% {
margin:-700px 210px; }
75% {
margin:-599px 210px; }
100% {
margin:-599px 210px; } }
@-moz-keyframes corre3{
0% {
margin:-700px -30px; }
25% {
margin:-700px 12px; }
35% {
margin:-712px 90px; }
50% {
margin:-700px 210px; }
75% {
margin:-599px 210px; }
100% {
margin:-599px 210px; } }
@keyframes corre3{
0% {
margin:-700px -30px; }
25% {
margin:-700px 12px; }
35% {
margin:-712px 90px; }
50% {
margin:-700px 210px; }
75% {
margin:-599px 210px; }
100% {
margin:-599px 210px; } }
1 Response