@keyframes water-wave {

  0% {

    transform: rotate(0deg);

  }

​

  100% {

    transform: rotate(360deg);

  }

}

​

.wave {

  position: relative;

  width: 240px;

  height: 240px;

  margin: 0 auto;

  border-radius: 50%;

  line-height: 50px;

  font-size: 14px;

  text-align: center;

  overflow: hidden;

  animation: water-wave linear infinite;

  box-shadow: 0 0 35px rgb(16 119 188 / 60%) inset;

}

  .wave1 {

    position: absolute;

    top: 60%;

    left: -65%;

    background: #0480C0;

    opacity: .6;

    width: 260%;

    height: 260%;

    border-radius: 40%;

    animation: inherit;

    animation-duration: 10s;

  }

​

  .wave2 {

    position: absolute;

    top: 60%;

    left: -60%;

    background: #0480C0;

    opacity: .4;

    width: 260%;

    height: 260%;

    border-radius: 35%;

    animation: inherit;

    animation-duration: 15s;

  }

​

  .wave3 {

    position: absolute;

    top: 60%;

    left: -55%;

    background: #0480C0;

    opacity: .2;

    width: 260%;

    height: 260%;

    border-radius: 40%;

    animation: inherit;

    animation-duration: 20s;

  }