css水波动画

效果图

HTML

<div class="water">
         <div class="point point1"></div>
         <div class="point point2"></div>
         <div class="point point3"></div>
         <div class="point point4"></div>
     </div>

CSS

.water{
         width: 200px;
         height: 200px;
         position: relative;
      }
 .point{
          position: absolute;
          border-radius: 50%;
          animation:border 2s linear infinite;
      }
      .point2{
          -webkit-animation-delay:.5s;
      }
      .point3{
          -webkit-animation-delay:1s;
      }
      .point4{
          -webkit-animation-delay:1.5s;
      }

      @keyframes border{
          from { 
              width:0;  
              height:0;  
              top:50%;  
              left:50%;  
              background-color: rgba(134, 183, 231, 1);
          }  
          to { 
              width:100%;  
              height:100%;  
              top:0;  
              left:0;  
              background-color: rgba(134, 183, 231,0);
          }
      }