Рідкі хвилі

<div class="liquid">
  <div class="liquid__wave liquid__wave_one"></div>
  <div class="liquid__wave liquid__wave_two"></div>
  <div class="liquid__wave liquid__wave_three"></div>
</div>

<style>
.liquid {
  position: relative;
  width: 220px;
  height: 120px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.14), #0b1120);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.liquid__wave {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200%;
  height: 60%;
  background: rgba(59, 130, 246, 0.26);
  opacity: 0.8;
  animation: waveMove 6s linear infinite;
}

.liquid__wave_two {
  height: 70%;
  animation-duration: 7s;
  background: rgba(139, 92, 246, 0.18);
  animation-direction: reverse;
}

.liquid__wave_three {
  height: 50%;
  animation-duration: 5s;
  opacity: 0.4;
}

@keyframes waveMove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
</style>