地图animation动画

.map{

            /* 设置图片的宽高，插入地图图片 map为父盒子，根据子绝父相设置定位 */

            width: 1707px;

            height: 800px;

            background-color: slategray;

            background: url(1120.png) no-repeat center center;

            position: relative;

        }

        /* 不给city宽高，由dotted、move、move1、move2来撑开，设置绝对定位 */

        .city{

            position: absolute;

            left: 1083px;

            top: 320px;

        }

        /* 出来的图形是一个原点，所以用border-reduis */

        .dotted{

            width: 8px;

            height: 8px;

            border-radius: 50%;

            background-color: azure;

        }

        /* div[class^=move] 属性选择器 ^是选择以move开头的属性值*/

        .city div[class^=move]{

            width: 8px;

            height: 8px;

            border-radius: 50%;

            /* 设置定位，让move的位置与botted的位置重合 */

            position: absolute;

            /* 设置完top，left的值后，是move盒子的左上角处于dotted圆心的位置

             所以要设置translate 才能和dotted盒子重合*/

            top: 50%;

            left: 50%;

            transform: translate(-50%,-50%);

             /* 出来的圆圈是由阴影来完成的 */

            box-shadow: 0 0 12px rgb(147, 116, 179);

            /* 动画综合写法 move是动画的名字 .5s是一周期完成需要的时间

            linear运动速度曲线  infinite循环播放*/

            animation: move .5s linear infinite;

        }

        .city div.move2{

            /* 动画属性 delay延迟0.4s */

            animation-delay: 0.4s;

        }

        .city div.move3{

            animation-delay: 0.7s;

        }

        /* @keyframes有两种写法 一种是from{} to{},另外一种是0%{}，100%{} */

        @keyframes move{

            0%{}

            40%{

                width: 50px;

                height: 50px;

                opacity: 1;

            }

            100%{

                width: 70px;

                height: 70px;

                opacity: 0;

            }

        }

<div class="map">

        <div class="city">

            <div class="dotted"></div>

            <div class="move"></div>

            <div class="move1"></div>

            <div class="move2"></div>

        </div>

    </div>