动态地图光晕向外扩散

一个简单的扩散光晕图，哪里需要放哪里，效果图如下：

 

<div class="myDiv">
      <div class="content">
        <div class="spot">
          <p></p>
          <span></span>
        </div>
      </div>
  </div>

 

<style  scoped>
*{
  margin: 0;
  padding: 0;
}
.myDiv {
  height: 300px;
  width: 300px;
   position: relative;
  background-color: rgba(239, 244, 247, 0.8);
}

.content {
  width: 98%;
  height: 98%;
  position: absolute;
  left: 10px;
  top: 10px;
}
.spot {
  background: #1322f1;
  width: 10px;
  height: 10px;
  border-radius: 50%;
    position: absolute;
  left: 60px;
  top: 60px;
}
p {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: myfirst 1.5s infinite;
  box-shadow: 0px 0px 1px #1322f1;
}
span {
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: myfirst 1.5s infinite;
  box-shadow: 0px 0px 1px #1322f1;
  animation-delay: 0.5s;
}

@keyframes myfirst {
  20% {
    transform: scale(2);
  }
  40% {
    transform: scale(3);
  }
  60% {
    transform: scale(4);
  }
  80% {
    transform: scale(5);
  }
  100% {
    transform: scale(6);
  }
}
</style>