这是一款CSS3地图热点区域动画，它的核心功能并不是地图数据的展示，比如城市和省份地区的关系，而是展示了热点地区的动画特效。在地图上分布了很多热点区域，利用CSS3的动画属性实现这些热点区域的闪烁动画效果。

在页面直接引入CSS样式就可以了，使用非常简单。

Html结构

<div class="map-service">
    <div class="map-service-right">
        <div class="china-map">
            <div class="region-list postition-1">
                <div class="area-box">
                    <span class="dot"></span>
                    <span class="pulse delay-01"></span>
                    <span class="pulse delay-02"></span>
                </div>
            </div>
            <div class="region-list active postition-2 online-node">
                <div class="area-box"><span class="dot"></span><span class="pulse delay-06"></span>
                    <span class="pulse delay-05"></span>
                    <span class="pulse delay-04"></span></div>
                <div class="show-regin"><span>四川</span></div>
            </div>
            <div class="region-list postition-3">
                <div class="area-box"><span class="dot"></span><span class="pulse delay-01"></span>
                    <span class="pulse delay-02"></span>
                    </div>
            </div>
            <div class="region-list waite postition-4 waite-node">
                <div class="area-box"><span class="dot"></span><span class="pulse delay-01"></span>
                    <span class="pulse delay-02"></span>
                    </div>
                <div class="show-regin"><span>陕西</span></div>
            </div>
            <div class="region-list waite postition-5 waite-node">
                <div class="area-box"><span class="dot"></span><span class="pulse delay-01"></span>
                    <span class="pulse delay-02"></span>
                    </div>
                <div class="show-regin"><span>湖北</span></div>
            </div>
             <div class="region-list active postition-6 online-node">
                <div class="area-box"><span class="dot"></span><span class="pulse delay-06"></span>
                    <span class="pulse delay-05"></span>
                    <span class="pulse delay-04"></span></div>
                <div class="show-regin"><span>广东</span></div>
            </div>
            <div class="region-list active postition-13 online-node">
                <div class="area-box"><span class="dot"></span><span class="pulse delay-04"></span>
                    <span class="pulse delay-05"></span>
                    <span class="pulse delay-03"></span></div>
                <div class="show-regin"><span>内蒙古</span></div>
            </div>
            <div class="region-list  active  postition-11 online-node">
                <div class="area-box"><span class="dot"></span><span class="pulse delay-06"></span>
                    <span class="pulse delay-05"></span>
                    <span class="pulse delay-04"></span></div>
                <div class="show-regin"><span>山东</span></div>
            </div>
            <div class="region-list active postition-7 online-node">
                <div class="area-box"><span class="dot"></span><span class="pulse delay-10"></span>
                    <span class="pulse delay-09"></span>
                    <span class="pulse delay-08"></span></div>
                <div class="show-regin"><span>辽宁</span></div>
            </div>
            <div class="region-list active postition-8 online-node">
                <div class="area-box"><span class="dot"></span><span class="pulse delay-06"></span>
                    <span class="pulse delay-05"></span>
                    <span class="pulse delay-04"></span></span></div>
                <div class="show-regin"><span>北京</span></div>
            </div>
            <div class="region-list active postition-9 online-node">
                <div class="area-box"><span class="dot"></span><span class="pulse delay-10"></span>
                    <span class="pulse delay-09"></span>
                    <span class="pulse delay-08"></span></div>
                <div class="show-regin"><span>江苏</span></div>
            </div>
            <div class="region-list active postition-10 online-node">
                <div class="area-box"><span class="dot"></span><span class="pulse delay-06"></span>
                    <span class="pulse delay-05"></span>
                    <span class="pulse delay-04"></span></div>
                <div class="show-regin"><span>香港</span></div>
            </div>
      
        </div>
    </div>
</div>