1. <style>
    2.     .map{
    3.         position: relative;
    4.         width: 747px;
    5.         height: 616px;
    6.         background-color: green;
    7.         margin: 0 auto;
    8.     }
    9.     .city{
    10.         position: absolute;
    11.         top: 227px;
    12.         right: 193px;
    13.     }
    14.     .dotted{
    15.         width: 8px;
    16.         height: 8px;
    17.         background-color: honeydew;
    18.         border-radius: 50%;
    19.     }
    20.     .city div[class^="pulse"]{
    21.         /* 保证我们的小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
    22.         position: absolute;
    23.         top: 50%;
    24.         left: 50%;
    25.         width: 8px;
    26.         transform: translate(-50%,-50%);
    27.         height: 8px;
    28.         /* 阴影 */
    29.         box-shadow: 0 0 12px white;
    30.         border-radius: 50%;
    31.         animation-name: pulse;
    32.         animation-duration: 1.2s;
    33.         /* 无限循环 */
    34.         animation-iteration-count: infinite;
    35.         /* 匀速变化 */
    36.         animation-timing-function: linear;
    37.     }
    38.     .city div.pulse2{
    39.         animation-delay: 0.4s;
    40.     }   
    41.     .city div.pulse3{
    42.         animation-delay: 0.8s;
    43.     }
    44.     @keyframes pulse{
    45.         0%{
    46.         }
    47.         70%{
    48.             width: 40px;
    49.             height: 40px;
    50.             /* 透明度 */
    51.             opacity: 1;
    52.         }
    53.         100%{
    54.             width: 70px;
    55.             height: 70px;
    56.             opacity: 0;
    57.         }
    58.     }
    59. </style>
    60. <body>
    61.     <div class="map">
    62.         <div class="city">
    63.             <div class="dotted"></div>
    64.             <div class="pulse1"></div>
    65.             <div class="pulse2"></div>
    66.             <div class="pulse3"></div>
    67.         </div>
    68.     </div>
    69. </body>

    image.png
    image.png