@import url("https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@400..800&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Baloo Thambi", cursive;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #111;
}

div {
  position: relative;
  border-style: solid;
  border-width: 30px 60px 40px 60px;
  border-color: #3760c9 #96ddfc #96ddfc #36bbf7;
  animation: 1s ease-in infinite alternate;
}

div::after {
  content: "";
  position: absolute;
  right: 62px;
  top: -32px;
  width: 50px;
  height: 70px;
  background: linear-gradient(#fff 45px, transparent 0),
    linear-gradient(#fff 45px, transparent 0),
    linear-gradient(#fff 45px, transparent 0);
  background-repeat: no-repeat;
  background-size: 30px 4px;
  background-position: 0 11px, 8px 35px, 0 60px;
  animation: drop 0.75s linear infinite;
}

@keyframes floating {
  0% {
    transform: translate(-2px, -5px);
  }
  100% {
    transform: translate(0, 5px);
  }
}

@keyframes drop {
  0% {
    background-position: 100px 11px, 115px 35px, 105px 60px;
    opacity: 1;
  }
  50% {
    background-position: 0 11px, 20px 35px, 5px 60px;
  }
  60% {
    background-position: -30px 11px, 0 35px, -10px 60px;
  }
  75%,
  100% {
    background-position: -30px 11px, -30px 35px, -30px 60px;
    opacity: 0.5;
  }
}