JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="drip-effect">
    <div class="drip">水滴</div>
    <div class="splash-wrapper">
      <div class="splash left">飛濺</div>
      <div class="splash right">飛濺</div>
    </div>
  </div>
</body>

CSS

body {
  background-color: skyblue;
}
.drip-effect {
  background-color: hsla(160, 80%,30%, 0.3);
  margin-left: 50vw;
  transform: translateX(-50%);
  height: 90vh;
}
.drip {
  color: blue;
  font-size: 2.5em;
  writing-mode: vertical-rl;
  margin-left: 50%;
  transform: translate(-50%, -80%);
  animation: waterdrop 1s forwards infinite linear;
}
.splash-wrapper {
  margin-top: 40%;
  margin-left: 53%;
  transform: translateX(-50%);
}
.splash {
  color: purple;
  font-size: 1.5em;
  display: inline-block;
}
.splash.left{
  animation: splash-l 1s forwards infinite linear;
}
.splash.right{
  animation: splash-r 1s forwards infinite linear;
}
@keyframes waterdrop {
  0% { transform: translate(-50%, -80%); }
  80% { transform: translate(-50%, 96%); opacity: 1; }
  100% { transform: translate(-50%, 140%); opacity: 0; }
}
@keyframes splash-l {
  0% { transform: translateX(0); opacity: 0.3; }
  80% { transform: translateX(0); opacity: 0.3; }
  100% { transform: translateX(-50%); opacity: 1; }
}
@keyframes splash-r {
  0% { transform: translateX(0); opacity: 0.3;}
  80% { transform: translateX(0); opacity: 0.3; }
  100% { transform: translateX(50%); opacity: 1; }
}