思路:需要在html代码生成N个要闪烁的点通过遍历生成html代码 ,然后再通过坐标定位点到相应的位置
$("#map").append("<div id='css_animation" + i + "' ><span class='pulse-icon1' style='background-color: #d0639c;z-index:9999999'><span class='item' style='box-shadow: 0 0 5px 2px #2f8'></span></span><div>");
var point_div = document.getElementById("css_animation" + i);
var point_overlay = new ol.Overlay({
element: point_div,
positioning: 'center-center'
});
map.addOverlay(point_overlay);
point_overlay.setPosition(p);
样式文件
.pulse-icon1 {
- display: inline-block;
- width: 15px;
- height: 15px;
- border-radius: 100%;
- background-color: red;
- z-index: 999999;
- position: relative;
- box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.75);
}
.item {
- box-shadow: 0 0 6px 2px #2f8;
- animation: pulsate 1s ease-out;
- animation-iteration-count: infinite;
- animation-delay: 1.1s;
- -webkit-border-radius: 100%;
- border-radius: 100%;
- height: 300%;
- width: 300%;
- animation: pulsate 2s infinite;
- position: absolute;
- margin: -100% 0 0 -100%;
}
效果