地图上描点的扩散效果，超简单

<style>
  .point,.point::before,.point::after{position: absolute;width: 12px; height: 12px; border-radius: 50%;content: ''; }
  .point::before{animation: scale 2s infinite; }
  .point::after{animation: scale2 2s infinite; }
  @keyframes scale{0%{ transform: scale(1); opacity:.9}100%{ transform: scale(6); opacity: 0;}}
  @keyframes scale2{0%{ transform: scale(1);opacity:.9;}100%{ transform: scale(12);opacity:0;}}


  .point,.point::before,.point::after{
  /* 设置颜色 */
  background-color: rgba(241, 34, 30, .9);}
  .point2,.point2::before,.point2::after{
  /* 设置颜色 */
  background-color: rgba(0, 221, 254, .9);}
  .point3,.point3::before,.point3::after{
  /* 设置颜色 */
  background-color:  rgba(1, 88, 255, .9);}
  .point4,.point4::before,.point4::after{
  /* 设置颜色 */
  background-color:  rgba(135, 229, 8, .9);}

</style>
<div class="content" style=" background: url(img/map2.jpg) no-repeat; height:94%; width: 96%; overflow: hidden; position: absolute;">
  <p style="color: white;">代码已经精简到了极致！</p>
  <div class="point" style="top: 30%; left: 30%; "></div>
  <div class="point point2" style="top: 20%; left: 20%; "></div>
  <div class="point point3" style="top: 50%; left:20%; "></div>
  <div class="point point4" style="top: 35%; left: 50%; "></div>
</div>