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; 
       }
   }</