<body>
  <div class="box-canvas">
    <div class="balloon-wrapper red">
      <div class="string"></div>
      <div class="balloon"></div>
    </div>
    <div class="balloon-wrapper green">
      <div class="string"></div>
      <div class="balloon"></div>
    </div>
    <div class="balloon-wrapper orange">
      <div class="string"></div>
      <div class="balloon"></div>
    </div>
    <div class="balloon-wrapper blue">
      <div class="string"></div>
      <div class="balloon"></div>
    </div>
    <div class="balloon-wrapper yellow">
      <div class="string"></div>
      <div class="balloon"></div>
    </div>
  </div>
</body>
:root {
  --red: red;
  --pink: pink;
  --green: #20B1A3;
}

body{
  background: #F4BCD3;
}

.box-canvas{
  position: relative;
  margin: auto;
  display: block;
  margin-bottom: 8%;
  width: 230px;
  height:600px;
  animation: floatUp 5s infinite linear;
}

@keyframes floatUp {
  0% {
    transform: translateY(100vh);
  }
  
  100% {
    transform: translateY(-480px);
  }
}

.red {
  --balloon-color: var(--red);
  --highlight-color: #FC9999;
  --top-initial: 40px;
  --string-angle: -20deg;
}

.yellow {
  --balloon-color: #F2F24B;
  --highlight-color: #E5E570;
  --top-initial: 80px;
  --left-initial: 50px;
  --string-angle: -8deg;
}

.green {
  --balloon-color: var(--green);
  --highlight-color: #BAD6D3;
  --top-initial: 0;
  --left-initial: 80px;
  --string-angle: 1deg;
}

.blue {
  --balloon-color: dodgerblue;
  --highlight-color: #6AB5FC;
  --left-initial: 100px;
  --top-initial: 110px;
  --string-angle: 10deg;
}

.orange {
  --balloon-color: orange;
  --highlight-color: #F9B94A;
  --left-initial: 140px;
  --top-initial: 50px;
  --string-angle: 18deg;
}

.balloon-wrapper {
  position: absolute;
  left: var(--left-initial);
  top: var(--top-initial);
  width: 85px;
}

.string {
  position: absolute;
  top: 110px;
  left: 42px;
  transform: rotate(var(--string-angle));
  transform-origin: top left;
  width: 2px;
  height: 250px;
  background: #50535E;
}

.balloon {
  position: absolute;
  width: 85px;
  height: 100px;
  background: var(--balloon-color);
  border-radius: 50%;
}

.balloon::before {
  content: '';
  position: absolute;
  right: 20px;
  top: 15px;
  width: 15px;
  height: 35px;
  box-shadow: 5px 0 0 var(--highlight-color);
  border-radius: 50%;
  transform: rotate(-30deg);
}

.balloon::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -15px;
  width: 25px;
  height: 20px;
  background: var(--balloon-color);
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.