.example {
  position:relative;
  margin-top:auto;
  
}
.dot:before{
  content:' ';
  position: absolute;
  z-index:2;
  left:0;
  top:0;
  width:9px;
  height:9px; 
  background-color: #71f505;
  border-radius: 50%;
  margin-top:3px ;
}

.dot:after {
  content:' ';
  position: absolute;
  z-index:1;
  width:9px;
  height:9px; 
  background-color: #71f505;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
  -webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
  -webkit-animation-duration: 1s;/*动画持续时间*/
  -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
  -webkit-animation-delay: 0s;/*动画延迟时间*/
  -webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
  -webkit-animation-direction: normal;/*定义动画方式*/
  margin-top:3px ;
}

@keyframes ripple {
   0% {
    left:5px;
    top:5px;
    opcity:75;
    width:0;
    height:0;
  }
  100% {
    left:-20px;
    top:-20px;
    opacity: 0;
    width:50px;
    height:50px;
  }
}