css3定点地图

如何制作一个定点地图

效果链接

一、添加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>