代码如下

        <div class="bruce flex-ct-x">
          <div class="ball"  :class="[ this.statusFlag? 'ball-warning': '']">
            <div class="title">
              <span class="num">{{ total }}</span
              ><br /><span>未处理事件</span>
            </div>
            <div class="ball-wave">
              <div class="wave-inner"></div>
            </div>
          </div>
        </div>
        <style>

.title {
  position: absolute;
  top: 35%;
  left: 20%;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  z-index: 99;
  text-align: center;
  .num {
    font-size: 22px;
    color: rgba(255, 255, 255, 1);
  }
}
//主要是下边的

@keyframes move_wave {
  0% {
    transform: translateX(0) translateZ(0) scaleY(1);
  }
  50% {
    transform: translateX(-25%) translateZ(0) scaleY(1);
  }
  100% {
    transform: translateX(-50%) translateZ(0) scaleY(1);
  }
}
@keyframes move-bigger {
    0% {
    box-shadow: 0px 0px 12px 2px rgba(253, 84, 84, 0.85);
  }
  50% {
    box-shadow: 0px 0px 12px 4px rgba(253, 84, 84, 0.85);
  }
  100% {
    box-shadow: 0px 0px 12px 8px rgba(253, 84, 84, 0.85);
  }
}
.ball {
  overflow: hidden;
  position: relative;
  border-radius: 100%;
  width: 100px;
  height: 100px;
  box-shadow: 0px 0px 12px 4px rgba(2, 102, 252, 0.4);
  background: radial-gradient(
    #e6e6e6,
    rgba(96, 158, 252, 1),
    rgba(2, 102, 252, 1)
  );
  .ball-wave {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    overflow: hidden;

    .wave-inner {
      position: absolute;
      left: 0;
      top: 40%;
      width: 600px;
      height: 164px;
      background: url("../../assets/image/wave.png");/*长方形的波浪图片*/
      background-repeat: repeat no-repeat;
      transform-origin: center bottom;
      animation: move_wave 15s linear infinite;
    }
  }
}
.ball-warning {
  // box-shadow: 0px 0px 12px 4px rgba(253, 84, 84, 0.7);
  background: radial-gradient(
    rgba(253, 84, 84, 0.2),
    rgba(253, 84, 84, 0.6),
    rgba(253, 84, 84, 0.9)
  );
   animation: move-bigger 1s infinite;
  .ball-wave {
    .wave-inner {
      background: url("../../assets/image/wave-warning.png");
    }
  }
}
        </style>

参考了以下链接
https://xiaozhuanlan.com/topic/9157246308
http://demo.lanrenzhijia.com/demo/45/4509/demo/