<div class="float"></div>

body {
  margin:0;
  height:100vh;
  display:grid;
  background:#b5f8fd;
}

.float {
  width:100%;
  display:grid;
  position:relative;
  margin:auto 0 0;
  height:200px;
  background:
    radial-gradient(circle 44px at top,#0000 94%,#5dc1e4) 0 40px,
    radial-gradient(circle 44px at top,#0000 94%,#008cd9) 0 0   ;
  background-size:80px 100%;
  background-repeat: repeat-x;
  animation:a 1s infinite linear;
}

.float:before {
  content:"";
  width:100%;
  z-index:1;
  background:
    radial-gradient(circle 44px at top,#0000 94%,#b0e5f3) 0 70px;
  background-size:80px 100%;
  background-repeat: repeat-x;
  animation:b 1s infinite linear;
}

.float:after {
   content: "";
   position: absolute;
   width: 70px;
   height: 150px;
   background: 
     linear-gradient(#f0caa3 0 0) bottom/16% 67%,
     linear-gradient(#33b54d 0 0) 50% 50%/54% 12%,
     radial-gradient(farthest-side at bottom left,#33b54d 98%,#0000) 100% 48%/25% 12%,
     radial-gradient(farthest-side at bottom right,#33b54d 98%,#0000) 0 48%/25% 12%,
     radial-gradient(farthest-side at top left,#0000 98%,#33b54d) 16% 30%/31% 20%,
     radial-gradient(farthest-side at top right,#0000 98%,#33b54d) 87% 30%/31% 20%,
     linear-gradient(#a87d53 0 0) top/20% 8%,linear-gradient(#33b54d 0 0)50% 7%/37% 8%,
     linear-gradient(#33b54d 0 0) bottom/100% 50%,
     linear-gradient(#33b54d 0 0) center/20% 100%;
   background-repeat: no-repeat;
   border-radius: 0 0 20px 20px;
   left: calc(50% - 35px);
   top: 0px;
   transform: rotate(45deg);
  animation:c 1s infinite linear;
}

@keyframes a {
  50%  {background-position: -40px 15px,45px 10px}
  100% {background-position: -80px 40px,80px 0px}
}

@keyframes b {
  50%  {background-position: 40px 45px}
  100% {background-position: 80px 70px}
}

@keyframes c{
  0%,100% {transform:translate(0,0) rotate(40deg)}
  33%{transform:translate(10px,-20px) rotate(50deg)}
  66%{transform:translate(5px,-10px) rotate(30deg)}
}