ROCKET

index.html

<div class="container">
  <div class="rocket">
    <div class="rocket-body">
      <div class="body"></div>
      <div class="fin fin-left"></div>
      <div class="fin fin-right"></div>
      <div class="window"></div>
    </div>
    <div class="gas"></div>
  </div>
  <div class="fume one"></div>
  <div class="fume two"></div>
  <div class="fume three"></div>
  <div class="fume four"></div>
  <div class="fume five"></div>
  <div class="fume six"></div>
  <div class="fume seven"></div>
  <div class="fume eight"></div>
  <div class="fume nine"></div>
  <div class="fume ten"></div>
  <div class="fume eleven"></div>
</div>

rocket.markdown

ROCKET

A Pen by Pratham on CodePen.

License.

script.js

// document.addEventListener("mouseover", (event) => {
//   let rocket = document.querySelector(".rocket");
//   rocket.style.left = event.pageX - 10 + "px";
//   rocket.style.top = event.pageY - 10 + "px";
// })

style.css

body {
/*   height: 100vh; */
  overflow: hidden;
  margin: 0;
}

.container {
  position: absolute;
  height: 700px;
  width: 100vw;
  overflow: hidden;
  background: #0a1931;
}

.rocket {
  position: absolute;
  pointer-events: none;
/*   height: 100px; */
  width: 80px;
  top: 20%;
  left: 50%;
/*   z-index: 100000; */
  transform-origin: center;
/*   transform: scale(0.8) translate(-50%, -50%); */
  animation: start 0.1s ease infinite alternate;
  transition: 0.1s;
}

.rocket .rocket-body {
  width: 80px;
  left: calc(50% - 50px);
  
}
.rocket .rocket-body .body {
  background-color: #dadada;
  height: 180px;
  left: calc(50% - 50px);
  border-top-right-radius: 100%;
  border-top-left-radius: 100%;
  border-bottom-left-radius: 60%;
  border-bottom-right-radius: 60%;
  border-top: 5px solid #f5f5f5;
}
.rocket .rocket-body:before {
  content: '';
  position: absolute;
  left: calc(50% - 24px);
  width: 48px;
  height: 13px;
  background-color: #f05945;
  bottom: -13px;
  border-bottom-right-radius: 60%;
  border-bottom-left-radius: 60%;
}
.rocket .window {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: #f05945;
  left: calc(50% - 25px);
  top: 40px;
  border: 5px solid #b4b2b2;
}
.rocket .fin {
  position: absolute;
  z-index: -100;
  height: 55px;
  width: 50px;
  background-color: #ec4646;
}
.rocket .fin-left {
  left: -30px;
  top: calc(100% - 55px);
  border-top-left-radius: 80%;
  border-bottom-left-radius: 20%;
}
.rocket .fin-right {
  right: -30px;
  top: calc(100% - 55px);
  border-top-right-radius: 80%;
  border-bottom-right-radius: 20%;
}

.gas {
  height: 150px;
  width: 20px;
  background: linear-gradient(#e25822, transparent);
  background-color: #e25822;
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  bottom: -156px;
  filter: blur(10px);
  animation: gas 2s ease-in-out infinite;
}

@keyframes gas {
  0% {
    background-color: blue;  
  }
  
  50% {
    background-color: orange;
  }
  
  100% {
    background-color: #e25822; 
  }
}

@keyframes start {
  0% {
    transform: translatey(-2px);
  }
  100% {
    transform: translatey(2px);
  }
}

.fume {
  height: 200px;
  width: 200px;
  position: absolute;
  background: white;
  border-radius: 50%;
  box-sizing: border-box;
  border: 4px solid black;
}

.one {
  right: -100px;
  bottom: 0px;
  border-bottom: none;
}

.two {
  height: 250px;
  width: 250px;
  bottom: -60px;
  left: -30px; 
}

.three {
  bottom: -40px;
  left: 150px;
  border-left: none;
  border-bottom: none;
}

.four {
  bottom: -100px;
  left: 300px;
  z-index: 100;
  border-bottom: none;
  border-left: none;
  border-right: none;
}

.five {
  height: 250px;
  width: 250px;
  bottom: -60px;
  left: 410px;
  border-right: none;
  border-bottom: none;
  z-index: 50;
}

.six {
  bottom: -50px;
  left: 600px;
  border-left: none;
}

.seven {
  left: 750px;
  height: 220px;
  width: 220px;
  bottom: -70px;
  border-left: none;
  transform: rotate(-20deg);
  z-index: 100;
  border-right: none;
  border-bottom: none;
}

.eight {
  height: 300px;
  width: 300px;
  left: 900px;
  bottom: -40px;
}

.nine {
  height: 100px;
  width: 100px;
  left: 1140px;
  bottom: -40px;
  border-left: none;
}

.ten {
  height: 100px;
  width: 100px;
  left: 1230px;
  bottom: -40px;
  border-left: none;
}

.eleven {
  height: 250px;
  width: 250px;
  left: 1280px;
  bottom: -80px;
  border-left: none;
  border-right: none;
}

.scale {
  position: absolute;
  height: 140px;
  width: 14px;
  background: #F7A900;
  right: 340px;
  top: 60px;
}