纯css水波动画

<div class="user-info">
    <div class="info">
    </div>
</div>

.user-info {
    width: 100%;
    height: 10rem;
    background-color: #0778fd;
    position: relative;
    overflow: hidden;
}

@keyframes turn {
  0% {
    transform: translate(-50%, 2%) rotateZ(0deg);
  }

  50% {
    transform: translate(-50%, -5%) rotateZ(180deg);
  }

  100% {
    transform: translate(-50%, 2%) rotateZ(360deg);
  }
}

.user-info::before,
.user-info::after {
  content: " ";
  position: absolute;
  min-width: 300vw;
  min-height: 300vw;
  animation-name: turn;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  left: 50%;
}

.user-info::before {
  border-radius: 48%;
  background-color: #1982fd;
  top: 12vh;
  animation-duration: 10s;
}

.user-info::after {
  border-radius: 43%;
  background-color: #74aef177;
  top: 17vh;
  animation-duration: 15s;
}

.info {
    position: absolute;
    display: flex;
    align-items: center;
    height: 90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    letter-spacing: 0.1em;
    width: var(--ctxWidth);
  
}