<view class="ponit"></view>

.ponit{
  position: absolute;
  top: 55%;
  left: 50%;
  z-index: 5;
  width: 50rpx;
  height: 50rpx;
  background: #fff;
  border-radius: 100%;
  border: 1rpx solid #eee;
  animation: ponitAnimation 1s infinite alternate;
}
@keyframes ponitAnimation{
  10%{
    box-shadow: 0 0 10rpx #fff;
  }
  28%{
    box-shadow: 0 0 10rpx #fff, 0 0 15rpx #fff;
  }
  46%{
    box-shadow: 0 0 10rpx #fff, 0 0 15rpx #fff,0 0 20rpx #fff;
  }
  52%{
    box-shadow: 0 0 10rpx #fff, 0 0 15rpx #fff,0 0 20rpx #fff,0 0 25rpx #fff;
  }
 70%{
    box-shadow: 0 0 10rpx #fff, 0 0 15rpx #fff,0 0 20rpx #fff,0 0 25rpx #fff,0 0 30rpx #fff;
  }
  90%{
    box-shadow: 0 0 10rpx #fff, 0 0 15rpx #fff,0 0 20rpx #fff,0 0 25rpx #fff,0 0 30rpx #fff,0 0 35rpx #fff;
  }
  100%{
    box-shadow: 0 0 10rpx #fff, 0 0 15rpx #fff,0 0 20rpx #fff,0 0 25rpx #fff,0 0 30rpx #fff,0 0 35rpx #fff,0 0 40rpx #fff;
  }
}