css水波纹效果

html:

  <div id="ball"></div>

css:

    body {
   margin: auto;
   min-height: 100vh;
   background-image: linear-gradient(rgb(90,90,200),rgb(3,3,110));
  }
  #ball {
   position: absolute;
   width: 200px;
   height: 200px;
   border-radius: 50%;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
   border: 4px white solid;
   text-align: center;
   font-weight: bold;
   background-color: skyblue;
   overflow: hidden;
  }
  #ball::before {
   content: '';
   display: block;
   position: absolute;
   width: 150%;
   height: 150%;
   background-color: rgba(255,255,255,0.8);
   border-radius: 40%;
   left: -25%;
   top: -100%;
   animation: swing 5s linear infinite;
  }
  #ball::after {
   content: 'OCEANBALL';
   display: block;
   position: absolute;
   width: 100%;
   line-height: 50px;
   font-size: 20px;
   font-weight: bold;
   top: 15%;
  }
  @keyframes swing{
   to {
    transform: rotate(360deg);
   }
  }