JSFiddle - React, Tailwind, and code Playground

by Pedro Marcano

HTML

<div class="container">
  <div class="rocket"></div>
  <span class="cloud cloud1"></span>
  <span class="cloud cloud2"></span>
  <span class="cloud cloud3"></span>
</div>

CSS

* {
  margin:0;
  padding:0;
  box-sizing: border-box;
  background: gray;
}

.container {
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  background:blue;
  border: 5px solid white;
  border-radius: 50%;
 overflow: hidden;
 box-shadow: inset 0px 0px 100px rgba(0,0,0,0.5);
 transform: translate(-50%,-50%);
  position: absolute;
}
.container:before {
  content: '';
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  position: absolute;
  z-index: 1;
}

.container .rocket {
  width: 30px;
  height: 40px;
  left:50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  background: white;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  animation: animateRocket .2s linear infinite;
}
@keyframes animateRocket {
  0% {
     transform: translate(-50%, -50%) translate(0,0);
  }
  50% {
     transform: translate(-50%, -50%) translate(-3px,-3px);
  }
  100% {
     transform: translate(-50%, -50%) translate(0,0);
  }
  
  
}

.cloud {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: white;
  border:2px solid white;
  position: absolute;
  box-shadow: inset 1p 1px 1px rgba(0,0,0,0.5);
  animation: animateCloud 1s linear infinite;
  z-index: -1;
}

.cloud1 {
  left: 10%;
}
.cloud2 {
  right: 45%;
}
.cloud3 {
  right: 10%;
}

@keyframes animateCloud {
  0%{
   top: 0; 
  }
  50%{
    top: 50%;
  }
  100%{
    top: 100%;
  }
}