HTML
<div class="container">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="earth">
<div class="overflow">
<div class="terrain"></div>
<div class="cloud c1"></div>
<div class="cloud c2"></div>
</div>
<div class="station">
<div class="gas"></div>
<div class="gas"></div>
<div class="gas"></div>
<div class="gas"></div>
<div class="gas"></div>
</div>
</div>
<div class="eli-moon">
<div class="moon"></div>
</div>
<div class="eli-rocket">
<div class="rocket">
<div class="antenna"></div>
<div class="window"></div>
<div class="flame-side"></div>
<div class="flame-center"></div>
<div class="flame-side2"></div>
<div class="propulsion"></div>
<div class="flame"></div>
</div>
</div>
</div>
SCSS
html, body{
margin: 0;
background: #0D0D0D;
overflow: hidden;
}
.container{
position: relative;
width: 580px;
height: 580px;
margin: 12vh auto;
.earth{
position: absolute;
width: 200px;
height: 200px;
background: #5fbcff;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius: 50%;
.overflow{
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius: 50%;
.terrain{
position: absolute;
background: #acef62;
width: 100px;
height: 50px;
top: 10px;
border-radius: 20% 10% 50% 20%;
transform: rotateZ(-20deg);
-webkit-transform: rotateZ(-20deg);
&:after{
content: '';
position: absolute;
display: block;
background: #acef62;
width: 50px;
height: 150px;
top: 10px;
border-radius: 20% 50% 110% 20%;
border-bottom: 10px solid #e49b2f;
}
&:before{
content: '';
position: absolute;
display: block;
background: #acef62;
width: 50px;
height: 150px;
top: 30px;
left: 150px;
border-radius: 50% 50% 80% 30%;
transform: rotateZ(20deg);
-webkit-transform: rotateZ(20deg);
border-left: 10px solid #e49b2f;
}
}
.cloud{
position: absolute;
width: 60px;
height: 35px;
background: rgba(255,255,255,1);
border-radius: 50%;
border-top: 2px solid rgba(100,100,100,0.4);
&:after{
content: '';
position: absolute;
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255,255,255,1);
left: -10px;
top: 0;
bottom: 0;
margin: auto;
}
&:before{
content: '';
position: absolute;
display: block;
width: 50px;
height: 42px;
border-radius: 50%;
background: rgba(255,255,255,1);
right: -10px;
bottom: 0px;
z-index: 5;
}
}
.c1{
left: 40px;
top: 120px;
animation: wind 4.5s ease-in-out 1s infinite;
}
.c2{
right: 30px;
top: 50px;
animation: wind 4s ease-in-out infinite;
}
}
.station{
position: absolute;
top: -90px;
width: 40px;
height: 100px;
border-left: 4px solid #990000;
border-right: 4px solid #990000;
border-top: 3px solid #990000;
margin: auto;
left: 0;
right: 0;
.gas{
position: absolute;
width: 30px;
height: 30px;
background: #777;
opacity: 0;
border-left: 3px solid #555;
border-right: 2px solid white;
z-index: 0;
border-radius: 50%;
animation: gas-on 0.3s linear;
&:nth-child(1){
top: 65px;
right: -29px;
animation-delay: 0.3s;
animation-iteration-count: 10;
}
&:nth-child(2){
top: 85px;
right: -23px;
animation-delay: 0.6s;
animation-iteration-count: 10;z-index: 7;
}
&:nth-child(3){
top: 105px;
right: -39px;
animation-delay: 0.9s;
animation-iteration-count: 10;
}
&:nth-child(4){
top: 85px;
right: -55px;
animation-delay: 1.2s;
animation-iteration-count: 5;
}
&:nth-child(5){
top: 65px;
right: -49px;
animation-delay: 1s;
animation-iteration-count: 7;
}
}
&:after{
content: '';
position: absolute;
display: block;
width: 61px;
height: 3px;
background: #990000;
transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
top: 50px;
left: -10px;
}
&:before{
content: '';
position: absolute;
display: block;
width: 61px;
height: 3px;
background: #990000;
transform: rotateZ(-45deg);
-webkit-transform: rotateZ(-45deg);
top: 50px;
left: -10px;
}
}
}
.eli-moon{
position: absolute;
width: 500px;
height: 500px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform-origin: center center;
animation: moon-rotation 10s linear infinite;
.moon{
position: absolute;
width: 50px;
height: 50px;
background: #c2e3f4;
border-radius: 50%;
&:before{
content: '';
display: block;
position: absolute;
width: 15px;
height: 15px;
background: #8caeca;
border-radius: 50%;
top: 10px;
right: 30px;
}
&:after{
content: '';
display: block;
position: absolute;
width: 11px;
height: 11px;
background: #8caeca;
border-radius: 50%;
bottom: 20px;
left: 30px;
}
}
}
}
.eli-rocket{
position: absolute;
width: 500px;
height: 500px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform-origin: center center;
-webkit-animation: moon-rotation 5s ease-in 5s 1,moon-rotation 5s linear 10s infinite;
animation: moon-rotation 5s ease-in 5s 1, moon-rotation 5s linear 10s infinite;
}
.rocket{
position: absolute;
background: #ddd;
width: 28px;
height: 115px;
top: 30px;
left: 56%;
border-radius: 50% 50% 40% 40%;
transform-origin: center center;
//animation: rocket-up 2s linear;
animation: rocket-shake 1s linear 12, rocket-up 2s ease-in 3.5s forwards;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
z-index: 5;
.antenna{
position: absolute;
width: 3px; height: 20px;
background: #aaa;
top: -20px;
border-bottom: 3px solid #444;
margin: auto;
left: 0;
right: 0;
border-radius: 10px 10px 0 0;
}
.window{
position: absolute;
margin: auto;
left: 0;
right: 0;
width: 10px;
height: 10px;
top: 40px;
border: 4px solid #111;
border-radius: 50%;
background: #ccffff;
}
.flame-side{
position: absolute;
width: 20px;
height: 40px;
background: #ddd;
bottom: -4px;
left: -7px;
-ms-transform: skewY(-35deg); /* IE 9 */
-webkit-transform: skewY(-35deg); /* Safari */
transform: skewY(-35deg);
}
.flame-side2{
position: absolute;
width: 20px;
height: 40px;
background: #ddd;
bottom: -4px;
right: -7px;
-ms-transform: skewY(35deg); /* IE 9 */
-webkit-transform: skewY(35deg); /* Safari */
transform: skewY(35deg);
}
.flame-center{
position: absolute;
width: 4px;
height: 35px;
background: #ddd;
bottom: -8px;
right: 0;
left: 0;
margin: auto;
border-left: 1px solid #555;
border-right: 1px solid #555;
z-index: 6;
}
}
.propulsion{
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: -15px;
width: 20px;
height: 15px;
background: #555;
border-bottom: 2px solid black;
z-index: 5;
border-radius: 60% 60% 0 0;
}
.flame,
.flame:after,
.flame:before {
border-radius: 50% 50% 0% 50%;
}
.flame {
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: -30px;
z-index: 4;
transform: rotate(45deg);
width: 25px;
height: 28px;
background-color: #C62828;
animation: flame 0.5s linear infinite alternate;
opacity: 0.3;
z-index: 0;
&:before {
position: absolute;
content: "";
background-color: #FFC107;
width: 20px;
height: 20px;
margin: 5px auto 3px auto;
left: 0;
right: 0;
}
}
@keyframes flame {
from {
transform: scale(1) rotate(40deg);
height: 28px;
opacity: 0.3;
}
to {
transform: scale(1.1) rotate(50deg);
height: 35px;
bottom: -40px;
opacity: 1;
}
}
@keyframes moon-rotation{
to{
transform: rotateZ(360deg);
}
}
@keyframes rocket-up{
from{
top: 30px;
}
to{
top: -50px;
transform: rotateZ(90deg);
-webkit-transform: rotateZ(90deg);
}
}
@keyframes rocket-shake{
0%{
transform: rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
}
33%{
transform: rotateZ(6deg);
-webkit-transform: rotateZ(6deg);
}
66%{
transform: rotateZ(-6deg);
-webkit-transform: rotateZ(-6deg);
}
100%{
transform: rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
}
}
@keyframes gas-on{
from{
opacity: 0.5;
}
to{
opacity: 1;
top: 90px;
}
}
@keyframes wind{
0%{
transform: translateX(0px);
}
33%{
transform: translateX(15px) translateY(5px);
}
66%{
transform: translateX(-20px) translateY(0px);
}
100%{
transform: translateX(0px) translateY(0px);
}
}
.star {
background: #fff;
height: .3vh;
width: .3vh;
position: absolute;
opacity: 1;
&:nth-of-type(1) { left: -10%; top: 10%; }
&:nth-of-type(2) { left: 5%; top: 50%; }
&:nth-of-type(3) { left: 80%; top: 5%; }
&:nth-of-type(4) { left: 60%; top: 10%; }
&:nth-of-type(5) { left: 90%; top: 40%; }
&:nth-of-type(6) { left: 30%; top: 20%; }
&:nth-of-type(7) { left: 20%; top: 80%; }
&:nth-of-type(8) { left: 120%; top: 20%; }
&:nth-of-type(9) { left: 25%; top: 30%; }
&:nth-of-type(10) { left: 30%; top: 5%; }
}
1 Response