CSS3地图热点区域动画的两种方法

第一种方法：在某个热点的外围添加一定宽度的阴影，利用动画使每个热点放大一定量的倍数(倍数不能太大，要紧凑)，这时在热点外围用伪元素作用的阴影就会随着热点的放大而进行放大，从而达成一定的效果。

①建立动画

 @keyframes mydot{
       0%{
        transform: scale(1);
       }
       10%{
        transform: scale(1.5);
       }
       20%{
        transform: scale(2);
        opacity: 0.9;
       }
       30%{
        transform: scale(2.5);
        opacity: 0.8;
       }
       40%{
        transform: scale(3);
        opacity: 0.7;
       }
       50%{
        transform: scale(3.5);
        opacity: 0.6;
       }
       60%{
        transform: scale(3.6);
        opacity: 0.5;
       }
       70%{
           transform: scale(3.7);
           opacity: 0.3;

       }
       80%{
           transform:scale(3.8);
           opacity: 0.2;
       }
       90%{
           transform:scale(3.9);
           opacity:0.1;
       }

       100%{
           transform: scale(4);
           opacity: 0; 
       }
   }

②引用动画(由于重复的地方颇多，这里就不把所有的代码全部粘贴过来。调整一个地区的方法就是改变他的定位值）

.bg .bg05 span{
        position: absolute;
        top:350px;
        left:530px;
        background: #FF9900;
    }
    .bg .bg05 p{
        position:absolute;
        top:330px;
        left:560px;
        width:20px;
        height: 20px;
        color:#fff;
        white-space: nowrap;//是否换行，no
    }
    .box .bg05 span::after{
        content:'';
        width:15px;
        height:15px;
        border-radius:50%;
        box-shadow: 0 0 1px #FF9900;
        position:absolute;
        top:-3px;
        left:-3px;
        animation: mydot 1.5s infinite ease;
        animation-delay: 0.4s;
    }
    .box .bg05 span::before{
        content:'';
        width:15px;
        height:15px;
        border-radius:50%;
        box-shadow: 0 0 1px #FF9900;
        position:absolute;
        top:-3px;
        left:-3px;
        animation: mydot 1.5s infinite ease ;
        animation-delay: 0.4s;
    }

第一种方法的效果图：

第二种方法：利用css3中的转换transform:scale(0);和元素的透明度opacity:1;并结合css3中的动画animation-delay:0.4s;延长动画的开始时间。

①建立动画

 @keyframes warn {
            0% {
                transform: scale(0);
                opacity: 1;
            }
            100% {
                transform: scale(1);
                opacity: 0;
            }
        }

②引用动画主要代码(还有一些热点的方位就不在这里过多赘述，只需改变每个热点的定位置即可！)

.area-box .pulse {
            position: absolute;
            top: -28px;
            left: -28px;
            height: 66px;
            width: 66px;
            border: 2px solid #b7b7b7;
            border-radius: 50%;
            box-shadow: 0 0 4px #82878f, 0 0 4px #82878f inset;
            opacity: 0.5;
            animation: warn 2s ease-out infinite;
        }
        .area-box .delay-01 {
            animation-delay: 0;
        }
        .area-box .delay-02 {
            animation-delay: 0.4s;
        }
        .area-box .delay-03 {
            animation-delay: 0.8s
        }
        .area-box .delay-04 {
            animation-delay: 1.2s
        }
        .area-box .delay-05 {
            animation-delay: 1.6s
        }

第二种方法的效果图：