mapbox展示动态图标

mapbox-gl通过为marker设置css动画，实现动态闪烁效果，先放个效果图 。

 1.主要就是为元素设置一个动画，

myfirst动画让元素随时间放大

 1 .marker {
 2             /* background: url("./image/loc.png"); */
 3             background-position: center center;
 4             width:20px;
 5             height:20px;
 6             display: flex;
 7             display: -webkit-flex;
 8             align-items: center;
 9             justify-content: center;
10         }
11         .marker p{
12             background-color: rgba(250, 0, 0, 0.2);
13             width: 10px;
14             height: 10px;
15             border-radius:50%;
16             animation: myfirst 1.5s infinite;
17             box-shadow: 0px 0px 2px #f00;
18         }
19         @keyframes myfirst{
20             10% {transform: scale(1.2);}
21             20% {transform: scale(2);}
22             40% {transform: scale(3);}
23             60% {transform: scale(4);}
24             80% {transform: scale(6);}
25             100% {transform: scale(8);}
26         }

 

 2.创建一个marker，其元素应用上述样式即可

完整代码如下：

  1 
  2 
  3 
  4     
  5     
  6     
  7     
  8     
  9     
 10     
 11     
 49 
 50 
 51 

 52 
151 
152 
153 

View Code