效果图：
代码：
<!DOCTYPE html>
<!-- saved from url=(0047)https://www.jq22.com/demo/cssMapdh202007031132/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>地图 坐标点缩放闪烁 从中心向四周扩散</title>
<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>
</head>
<body>
<div class="point" style="top: 20%; left: 30%; "></div>
<div class="point point2" style="top: 20%; left: 20%; "></div>
<div class="point point3" style="top: 49%; left:20%; "></div>
<div class="point point4" style="top: 35%; left: 10%; "></div>
</body></html>