SOURCE

<div class="container">
  <div class="grad3" style="background: radial-gradient(circle, rgba(191, 191, 191, 1), rgba(191, 191, 191, 0) 70.71%)"></div>
  <hr>
  <div class="grad3" style="background:#bfbfbf;box-shadow: 0 0 5px 0px #bfbfbf;"></div>
  <hr>
    <div class="grad3" style="box-shadow: 0 0 5px 0px #1890ff;"></div>
  <hr>
      <div class="grad3"></div>
  <hr>
  <div class="wave ripple danger">
    <div class="circle">
    </div>
    <div class="circle">
    </div>
    <div class="circle">
    </div>
    <div class="circle">
    </div>
    <div class="content">
      <i class="fa fa-bell">
      </i>
    </div>
  </div>
  <hr>
  <div class="wave solid warning">
    <div class="circle">
    </div>
    <div class="content">
      <i class="fa fa-bell">
      </i>
    </div>
  </div>
  <hr>
  <div class="wave solid warning">
    <div class="circle" style="background:#bfbfbf">
    </div>
    <div class="content">
      <i class="fa fa-bell">
      </i>
    </div>
  </div>
</div>

 body {
   margin: 0;
 }
 
 .container {
   position: absolute;
   top: 10%;
   left: 30%;
   width: 40%;
   height: 40%;
   display: flex;
 }
 /************以下为具体实现************/
 
 .grad3 {
   animation: scale-ani 1s;
   height: 24px;
   width: 24px;
   border-radius: 50%;
   background: #1890ff;
 }
 
 .grad2 {
   animation: scale-ani 1s;
   height: 24px;
   width: 24px;
   border-radius: 50%;
   /* background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
   /* background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
   /* background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
   background: radial-gradient(circle, rgba(24, 144, 255, 1), rgba(24, 144, 255, 0) 70.71%);
   /* 标准的语法（必须放在最后） */
 }
 
 @keyframes scale-ani {
   0% {
     /* opacity: 0; */
     transform: scale(0);
   }
   50% {
     /* opacity: 1; */
     transform: scale(1.5);
   }
   100% {
     /* opacity: 1; */
     transform: scale(1);
   }
 }
 
 .wave {
   position: relative;
   width: 24px;
   height: 24px;
   text-align: center;
   line-height: 100px;
   font-size: 28px;
 }
 
 .wave .circle {
   position: absolute;
   border-radius: 50%;
   opacity: 0;
   transform: scale(1);
 }
 /* 波纹效果 */
 
 .wave.ripple .circle {
   width: calc(100% - 6px);
   /* 减去边框的大小 */
   height: calc(100% - 6px);
   /* 减去边框的大小 */
   border: 3px solid #fff;
 }
 
 .wave.ripple .circle:first-child {
   animation: circle-opacity 1s;
 }
 
 .wave.ripple .circle:nth-child(2) {
   animation: circle-opacity 1s;
   animation-delay: .3s;
 }
 
 .wave.ripple .circle:nth-child(3) {
   animation: circle-opacity 1s;
   animation-delay: .6s;
 }
 
 .wave.ripple .circle:nth-child(4) {
   border-radius: 50%;
   border-color: transparent!important;
   animation: circle-opacity1 1s;
   animation-delay: .6s;
   background: darkgray;
   opacity: 1;
   transform: scale(1);
 }
 
 .wave.ripple.danger {
   color: #bfbfbf;
 }
 
 .wave.ripple.danger .circle {
   border-color: #bfbfbf;
 }
 
 .wave.ripple.warning {
   color: #bfbfbf;
 }
 
 .wave.ripple.warning .circle {
   border-color: #bfbfbf;
 }
 /* 波动效果 */
 
 .wave.solid .circle {
   width: 100%;
   height: 100%;
   background: #fff;
   opacity: 1;
 }
 
 .wave.solid .circle:first-child {
   animation: circle-opacity 1s;
 }
 
 .wave.solid.danger {
   color: red;
 }
 
 .wave.solid.danger .circle {
   background: red;
 }
 
 .wave.solid.warning {
   color: #1890ff;
 }
 
 .wave.solid.warning .circle {
   background: #1890ff;
 }
 
 @keyframes circle-opacity {
   0% {
     opacity: 1;
     transform: scale(0);
   }
   50% {
     opacity: 0.1;
     transform: scale(1);
   }
   100% {
     opacity: 1;
     transform: scale(1);
   }
 }
 
 @keyframes circle-opacity1 {
   from {
     opacity: 0;
     transform: scale(0);
   }
   to {
     opacity: 1;
     transform: scale(1);
   }
 }