第一種方法：在某個熱點的外圍新增一定寬度的陰影，利用動畫使每個熱點放大一定量的倍數(倍數不能太大，要緊湊)，這時在熱點外圍用偽元素作用的陰影就會隨著熱點的放大而進行放大，從而達成一定的效果。

①建立動畫

 @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
        }