css实现水波浪效果

在项目中，我们常常想用css做成更美的效果，水波浪图就是最常用的方法。那么我们怎么实现呢？
别慌，我已经把代码贴出来了。

html部分

    <div class="global-page-state">
      <div class="installing">
        <div class="wave">正在安装</div>
      </div>
    </div>

css部分

.global-page-state {
  .installing {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 88px;
    height: 88px;
    color: #fff;
    line-height: 83px;
    text-align: center;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    .wave {
      position: relative;
      align-items: center;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: hidden;
      background-color: rgb(118, 218, 255);
      overflow: hidden;
      box-shadow: 0px 0px 7px 1px #76daff;
      &:before,
      &:after {
        content: '';
        position: absolute;
        left: 50%;
        min-width: 600px;
        min-height: 600px;
        background-color: #fff;
        animation-name: rotate;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      }
      &:before {
        bottom: 68px;
        border-radius: 45%;
        animation-duration: 5s;
      }
      &:after {
        bottom: 64px;
        opacity: 0.5;
        border-radius: 47%;
        animation-duration: 6s;
      }
    }
    @keyframes rotate {
      0% {
        transform: translate(-50%, 0) rotateZ(0deg);
      }
      50% {
        transform: translate(-50%, -2%) rotateZ(180deg);
      }
      100% {
        transform: translate(-50%, 0%) rotateZ(360deg);
      }
    }
  }
}