纯CSS实现水波浪特效

效果图如下：

第一步：

<div class="box">
  <div class="water"></div>
</div>

第二步：

* {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

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

      .box {
        position: relative;
        width: 360px;
        height: 360px;
        /* border-radius: 50%; */
        border: 3px solid rgb(246, 247, 248);
        box-shadow: 0 0 0 3px rgb(41, 134, 196);
      }

      .water {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, #00a6ff, #5659ff);
        /* border-radius: 50%; */
        overflow: hidden;
      }

      .water::after {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 130%;
        height: 130%;
        border-radius: 40%;
        background-color: rgb(153, 140, 140);
        animation: animeteOut 5s linear infinite;
      }

      @keyframes animeteOut {
        0% {
          transform: translate(-50%, -65%) rotate(0deg);
        }

        100% {
          transform: translate(-50%, -65%) rotate(360deg);
        }
      }

      .water::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 130%;
        height: 130%;
        border-radius: 42%;
        background-color: rgba(100, 32, 32, 0.2);
        animation: animeteInner 7s linear infinite;
      }

      @keyframes animeteInner {
        0% {
          transform: translate(-50%, -60%) rotate(0deg);
        }

        100% {
          transform: translate(-50%, -60%) rotate(360deg);
        }
      }