title: html and css rocket animation
body: <p>I was doing the following tutorial on this video:
  <a href="https://www.youtube.com/watch?v=mAewuQPMFI8&amp;t=106s" rel="nofollow noreferrer">https://www.youtube.com/watch?v=mAewuQPMFI8&amp;t=106s</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@charset "utf-8";
  
  *
  {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  .scene
  {
      position: relative;
      width: 100%;
      height: 100vh;
      background: #01070A;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .scene i
  {
      position: absolute;
      top: -250px;
      background: rgba(255,255,255,0.50);
      animation: animateStars linear infinite;
  }
  @keyframes animateStars {
      0%
      {
          transform: translateY(0);
      }
      100%
      {
          transform: translateY(200vh);
      }
  }
  .scene .rocket
  {
      position: relative;
      animation: animate 0.2s, ease infinite;;
  }
  @keyframes animate
  {
      0%,100%;
      {
          transform: translateY(-2px);
      }
      50%;
      {
          transform: translateY(2px);
      }
  }
  .scene .rocket::before
  {
      content: '';
      position: absolute;
      bottom: -200px;
      left: 50px;
      transform: translateX(-50px);
      width: 10px;
      height: 200px;
      background: linear-gradient(#00d0ff,transparent);
  }
  .scene .rocket::after
  {
      content: '';
      position: absolute;
      bottom: -200px;
      left: 50px;
      transform: translateX(-50px);
      width: 10px;
      height: 200px;
      background: linear-gradient(#00d0ff,transparent);
      filter: blur(20px);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Rocket Animation Effect&lt;/title&gt;
  &lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="scene" &gt;
          &lt;div class="rocket"&gt;
          &lt;img src="rocket.png" width="72" height="99" alt=""/&gt; 
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script&gt;
          function star() {
              let count = 50;
              let scene = document.querySelector('.scene');
              let i = 0;
              while(i &gt; count){
                  let star = document.createElement('i');
                  let x = Math.floor(Math.random() * window.innerWidth);
                  
                  let duration = Math.random() * 1;
                  let h = Math.random() * 100;
                  
                  star.style.left = x + 'px';
                  star.style.width = 1 'px';
                  star.style.height = h 'px';
                  star.style.animationDuration = duration + 's';
                  
                  scene.appendChild(star);
                  i++
              }
          }
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>the code was supposed to show a flying rocket controlled by the mouse, but the code didn't turn out it showed on the tutorial. If anyone can tell my what  i did wrong, i would appreciate it greatly.</p>
  <p>PLease and thank you.</p>