如何制作一个定点地图
效果链接
一、添加css
1、添加背景图
.hsbj{height:760px;background:url(images/map_balck_whole_bg.jpg) center no-repeat;}
.hsbj2{width:748px;height:618px;margin-left:414px;padding-top:60px;
background:url(images/map_black_bg.png) center no-repeat;position:relative;}
2、添加扩大并渐渐消失的波纹
.lanseyd{display:block; width:66px;height:66px;border-radius:50%;border:4px solid #82878f;
box-shadow:0 0 12px #82878f;animation:diyi 3s infinite;position:absolute;}
.lanseyd2{display:block; width:66px;height:66px;border-radius:50%;border:4px solid #f90;
box-shadow:0 0 12px #f90;animation:diyi 3s infinite;position:absolute;}
.lanseyd3{display:block; width:88px;height:88px;border-radius:50%;border:4px solid #0080d9;
box-shadow:0 0 12px #0080d9;animation:diyi 3s infinite;position:absolute;}
.lanseyd4{display:block; width:110px;height:110px;border-radius:50%;border:4px solid #0080d9;
box-shadow:0 0 12px #0080d9;animation:diyi 3s infinite;position:absolute;}
@keyframes diyi{
0%{transform:scale(0);opacity:1;}
100%{transform:scale(1);opacity:0;}
}
3、设置不同的动画播放时的效果
.yc1{animation-delay:0.6s}
.yc2{animation-delay:0.9s}
4、设置文字和其定位的距离和添加定位的点和不同的颜色
.wenzi{font-size:14px;color:#fff;position:absolute;top:-10px; left:30px;white-space:nowrap; }
.shidian{width:12px;height:12px;border-radius:50%;position:absolute;}
.tjysh{background:#b7b7b7;}
.tjysl{background:#009fd9;}
.tjysy{background:#f90;}
5、波纹所需的重合时的定位
.postitionpy{top:-29px;left:-29px;}
.postitionpy-2{top:-40px;left:-40px;}
.postitionpy-3{top:-52px;left:-52px;}
6、所有绝对定位圆点及波纹的位置
.postition-1{left:302px;top:308px}
.postition-2{left:401px;top:403px}
.postition-3{left:358px;top:516px}
.postition-4{left:473px;top:348px}
.postition-5{left:526px;top:394px}
.postition-6{left:526px;top:515px}
.postition-7{left:652px;top:200px;}
.postition-8{left:559px;top:229px}
.postition-9{left:637px;top:371px}
.postition-10{left:554px;top:539px}
.postition-11{left:604px;top:300px}
.postition-12{left:470px;top:250px}
二、body中的格式
<div class="hsbj">
<div class="hsbj2">
<div class="shidian tjysh postition-1"><span class="lanseyd postitionpy"></span>
<span class="lanseyd yc1 postitionpy"></span></div>
<div class="shidian tjysl postition-2"><span class="lanseyd3 postitionpy-2"></span>
<span class="lanseyd3 yc1 postitionpy-2"></span><span class="lanseyd3 yc2 postitionpy-2"></span><p class="wenzi">四川</p></div>
<div class="shidian tjysh postition-3"><span class="lanseyd postitionpy"></span>
<span class="lanseyd yc1 postitionpy"></span></div>
<div class="shidian tjysy postition-4"><span class="lanseyd2 postitionpy"></span>
<span class="lanseyd2 yc1 postitionpy"></span><p class="wenzi">陕西</p></div>
<div class="shidian tjysy postition-5"><span class="lanseyd2 postitionpy"></span>
<span class="lanseyd2 yc1 postitionpy"></span><p class="wenzi">湖北</p></div>
<div class="shidian tjysl postition-6"><span class="lanseyd3 postitionpy-2"></span>
<span class="lanseyd3 yc1 postitionpy-2"></span><span class="lanseyd3 yc2 postitionpy-2"></span></div>
<div class="shidian tjysl postition-7"><span class="lanseyd4 postitionpy-3"></span>
<span class="lanseyd4 yc1 postitionpy-3"></span><span class="lanseyd4 yc2 postitionpy-3"></span><p class="wenzi">辽宁</p></div>
<div class="shidian tjysl postition-8"><span class="lanseyd3 postitionpy-2"></span>
<span class="lanseyd3 yc1 postitionpy-2"></span><span class="lanseyd3 yc2 postitionpy-2"></span></div>
<div class="shidian tjysl postition-8"><span class="lanseyd3 postitionpy-2"></span>
<span class="lanseyd3 yc1 postitionpy-2"></span><span class="lanseyd3 yc2 postitionpy-2"></span></div>
<div class="shidian tjysl postition-9"><span class="lanseyd4 postitionpy-3"></span>
<span class="lanseyd4 yc1 postitionpy-3"></span><span class="lanseyd4 yc2 postitionpy-3"></span><p class="wenzi">江苏</p></div>
<div class="shidian tjysl postition-10"><span class="lanseyd3 postitionpy-2"></span>
<span class="lanseyd3 yc1 postitionpy-2"></span><span class="lanseyd3 yc2 postitionpy-2"></span></div>
<div class="shidian tjysl postition-11"><span class="lanseyd3 postitionpy-2"></span>
<span class="lanseyd3 yc1 postitionpy-2"></span><span class="lanseyd3 yc2 postitionpy-2"></span></div>
<div class="shidian tjysl postition-12"><span class="lanseyd3 postitionpy-2"></span>
<span class="lanseyd3 yc1 postitionpy-2"></span><span class="lanseyd3 yc2 postitionpy-2"></span></div>
</div>
</div>