地图热点动图案例

效果图如下：

利用动画animation实现

html代码如下：

         简单介绍下结构：首先用map这个大盒子装中国地图这个背景图，其次是热点动画用city这个盒子来包裹，dotted是上图中心的蓝点，剩余三个div盒子就是三个波纹，利用动画animation即可实现。

<div class="map">
    <div class="city">
        <div class="dotted"></div>
        <div class="pluse1"></div>
        <div class="pluse2"></div>
        <div class="pluse3"></div>
    </div>
</div>

CSS代码如下：

body{
    background: #333;
}
.map{
    width: 747px;
    height:617px;
    background: url('插入一张透明中国地图') no-repeat;
    margin: 0 auto;
}
.city{
    position: absolute;
    left:27px;
    right:193px;
}
.dotted{
    width: 8px;
    height: 8px;
    background: #09f;
    border-radius: 50%;
}
/*利用属性选择器  将以pluse开头的div都选中设置*/
.city div[classs^="pluse"]{
    /*为了保证小波纹会一直在city这个盒子的中心往外发散，利用定位将其固定*/
    position:absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 8px;
    height: 8px;
    /*为了美观在这不用border  也不用背景颜色  而是用box-shadow*/
    box-shadow: 0 0 12px #009dfd;
    border-radius: 50%;
    /*使用动画*/
    animation: move 1.3s linear infinate;
}
/*定义动画*/
@keyframes move{
    70%{
        width: 40px;
        height: 40px;
        opacity: 1:
    }
    100%{
        width: 70px;
        height: 70px;
        opacity: 0;
    }
}

在这里只写了北京这个城市的热点动画，剩余台北、广州跟上面步骤一样，只需利用多类名，设置其定位的top值和right值，必须使用top和right，因为上面使用的就是top和righ利用多类名如果使用bottom和left会被top和right覆盖掉，所以保持一致即可.