Rocket take off

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%; } }
JAVASCRIPT
Expand for more options Login