最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Openlayers如何实现点闪烁扩散效果 Openlayers实现点闪烁扩散效果代码
时间:2020-09-24 编辑:袖梨 来源:一聚教程网
Openlayers如何实现点闪烁扩散效果?本篇文章小编给大家分享一下Openlayers实现点闪烁扩散效果代码,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
点闪烁样式:
DOM的样式实现
css;">/**橙色点扩散闪烁样式*/ .point_animation{ background: #ff9900; border: 2px #ff9900 solid; border-radius: 50%; position: absolute; } .point_animation p, .point_animation span{ position: absolute; animation: point_animation 1.5s infinite; box-shadow: 0px 0px 1px #ff9900; margin: 0px; border-radius: 50%; } .point_animation span{ animation-delay: 0.8s; } @keyframes point_animation{ 10% { transform: scale(1); } 100% { transform: scale(8); } } /**红色点扩散闪烁样式*/ .css_animation{ border-radius: 25px; background: rgba(255, 0, 0, 0.9); transform: scale(0); animation: mypoint 3s; animation-iteration-count: infinite; } @keyframes mypoint{ to{ transform: scale(1.5); background: rgba(0, 0, 0, 0); } }
在地图上添加点—采用overlay添加DOM元素
需要用到Openlayers中的overlay元素,官方对于如何使用overlay做出了相关API说明
///创建overlay,element传入的是存在于web中的DOM元素 var popup = new ol.Overlay({ element: document.getElementById('popup') }); popup.setPosition(coordinate);//设置overlay的位置 map.addOverlay(popup);//讲overlay添加到地图上
具体代码
点扩散
相关文章
- SpringBoot测试配置属性与web启动环境解析 10-24
- SpringBoot常用计量与bean属性校验和进制数据转换规则解析 10-24
- 工厂方法在Spring框架中的运用介绍 10-24
- SpringBoot热部署设置详解 10-24
- JavaScript二叉搜索树构建操作解析 10-12
- JavaScript二叉树及各种遍历算法讲解 10-12