一款CSS3地图热点区域动画

一款CSS3地图热点区域动画

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

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

Html结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<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>

CSS3地图热点区域动画

文件信息:

    1

    发表评论