水球动效

  <div class="circle">
         
      </div>

  .circle{
          margin: 200px;
          width: 200px;
          height: 200px;
          background: pink;
          -webkit-animation: transform 25s ease-in-out infinite alternate both;
          animation: transform 25s ease-in-out infinite alternate both;
          transform-style: preserve-3d;
      }
      @keyframes transform {
          0%, 100% {
              border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
          }
          14% {
              border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
          }
          28% {
              border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
          }
          42% {
              border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
          }
          56% {
              border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
          }
          70% {
              border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
          }
          70% {
              border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
          }
      }