纯CSS实现地图标记光圈扩散效果
给地图上定位的多个点添加光圈扩散效果,光圈由小变大,颜色由深色过渡到浅色。
效果图
html代码
<div class="map-bg"><p class="region-item"><span class="region-spot">●</span></p><p class="region-item"><span class="region-spot">●</span></p><p class="region-item"><span class="region-spot">●</span></p></div>
css代码
/*地图背景*/
.map-bg{background: url(/wp-content/uploads/2021/08/about-us-map.png);background-size: cover;height: 455px;width: 854px;margin: 50px auto;position: relative;
}
/*地图标记外层容器*/
.map .region-item{position: absolute;left: 14%;bottom: 49%;width: 148px;cursor: pointer;
}
.map .region-item:nth-child(2){width: 322px;left: 60%;bottom: 43%;
}
.map .region-item:nth-child(3){left: 73.2%;bottom: 53.3%;
}
/*地图标记圆点*/
.map .region-item .region-spot{display: inline-flex;color: #00a0e9;justify-content: center;align-items: center;line-height: 110%;
}
/*扩散的光圈*/
.map .region-item .region-spot::after{content: '';width: 20px;height: 20px;border: solid 2px #00a0e9;border-radius: 50%;position: absolute;left: 50%;transform: translateX(-50%);animation: spreadCircle 3s infinite;
}
/*光圈扩散动画*/
@keyframes spreadCircle{0% {width: 20px;height: 20px;opacity: 1;}100% {width: 120px;height: 120px;opacity: 0;}
}
加强版
在之前的基础上,让鼠标悬浮在圆点上时出现文字标签。
效果图
html代码
<div class="map-bg"><p class="region-item"><span class="region-spot">●</span><span class="region-tab">美国分公司</span></p><p class="region-item"><span class="region-spot">●</span><span class="region-tab">厦门总部 | 成都研发中心</span></p><p class="region-item"><span class="region-spot">●</span><span class="region-tab">韩国分公司</span></p></div>
CSS代码
/*地图背景*/
.map-bg{background: url(/wp-content/uploads/2021/08/about-us-map.png);background-size: cover;height: 455px;width: 854px;margin: 50px auto;position: relative;
}
/*地图标记外层容器*/
.map .region-item{display: inline-flex;flex-direction: column;align-items: center;position: absolute;left: 14%;bottom: 49%;width: 148px;cursor: pointer;
}
.map .region-item:nth-child(2){width: 322px;left: 60%;bottom: 43%;
}
.map .region-item:nth-child(3){left: 73.2%;bottom: 53.3%;
}
/*文字标签*/
.map .region-tab{width: 100%;height: 64px;background-image: linear-gradient(132deg, #0d66cb 0%, #227ad7 50%, #3b92e4 100%);box-shadow: 4px 5px 5px 0px rgb(0 7 12 / 29%);border-radius: 10px;color: #fff;font-size: 22px;line-height: 64px;position: absolute;left: 0;top: -72px;margin-bottom: 6px;z-index: 99;display: none;
}
/*标签底部的三角形*/
.map .region-tab::after {content: '';width: 0;height: 0;border-left: 15px solid transparent;border-right: 15px solid transparent;border-top: 15px solid #2880da;position: absolute;bottom: -8px;left: 40%;
}
.map .region-item:nth-child(2) .region-tab:after {left: 45.3%;
}
/*地图标记圆点*/
.map .region-item .region-spot{display: inline-flex;color: #00a0e9;justify-content: center;align-items: center;line-height: 110%;
}
/*鼠标悬浮时显示文字标签*/
.map .region-spot:hover+.region-tab{display: inline-block;
}
/*扩散的光圈*/
.map .region-item .region-spot::after{content: '';width: 20px;height: 20px;border: solid 2px #00a0e9;border-radius: 50%;position: absolute;left: 50%;transform: translateX(-50%);animation: spreadCircle 3s infinite;
}
/*光圈扩散动画*/
@keyframes spreadCircle{0% {width: 20px;height: 20px;opacity: 1;}100% {width: 120px;height: 120px;opacity: 0;}
}
存在的缺陷
鼠标悬浮显示文字标签的悬浮范围包括了扩散的光圈,当两个圆点距离过近时会出现光圈交叉重叠的情况,导致鼠标悬浮的目标不准确。
临时解决方案
根据实际情况缩小光圈,避免发生重叠现象。
纯CSS实现地图标记光圈扩散效果相关推荐
- java实现展示框,如何使用纯CSS实现蝴蝶标本的展示框效果
本篇文章给大家带来的内容是关于如何使用纯CSS实现蝴蝶标本的展示框效果 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 每日前端实战系列的全部源代码请从 git ...
- 用纯css实现优雅的tab页,纯CSS实现Tab页切换效果的方法
纯CSS实现Tab页切换效果的方法 发布时间:2020-10-26 09:30:20 来源:亿速云 阅读:104 作者:小新 小编给大家分享一下纯CSS实现Tab页切换效果的方法,希望大家阅读完这篇文 ...
- css三实现ui,纯CSS实现常见的UI效果
原标题:纯CSS实现常见的UI效果 转自:掘金 - alphardex 前言 切图仔,是大多数前端用来自嘲的称呼.相信很多人平时写页面的时候,大部分时间是在切图和排图,如此往复.这里并不是要否定切图本 ...
- 【CSS】纯css实现立体摆放图片效果
1. 元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
- Css实现刘海,纯CSS样式写刘海屏效果
1. 效果: 2. 代码: 刘海? :root { --bg--color: #ed4014; } body { background: var(--bg--color); } .top_bar_di ...
- css实现提示信息,纯CSS 实现tooltip 内容提示信息效果
Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验. 实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示.实现方法也非常简单 ...
- html怎么把字做成动画效果,利用纯CSS实现动态的文字效果实例
大家可能经常会看到类似酷炫的网站: 在这类网站中能看到,一打开页面,无论是文字还是图片,都随着规定时间的而变化.原理很简单,主要用到CSS中animation属性. 接下来,我以我目前的工程项目为例, ...
- 纯CSS实现3D正方体动画效果
目录 前言 正文 1.基本架构 2.书写每个div样式 3.为需要产生动画的一面单独设置样式 4.设置鼠标hover效果 5.优化 总结 前言 纯CSS实现3D正方体动画效果,此方法是通过transf ...
- html如何实现立体效果,纯css实现立体摆放图片效果的示例代码
1.元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举个栗 ...
最新文章
- 首个生物医疗开放大数据研究中心在沪成立
- C#中StringBuilder类的使用
- 安装了git之后visual studio 2019变得很卡怎么办?(工具 --> 选项 --> 源代码管理工具【设置成无】)
- observable_Java Observable clearChanged()方法与示例
- mysql之锁与事务
- 关于a元素href的注意点
- nvinfer1::cudnn::Engine::deserialize()出错的原因
- 集成maven和Spring boot的profile 专题
- python vbscript_VBScript学习笔记
- 百度蜘蛛的抓取方式有哪些
- 用计算机和电视机组成家庭影院,家庭影院怎么连接电脑_家庭影院连接电脑详解【图文】-太平洋IT百科...
- Nginx反向代理:多域名跳转多台服务器(研发需求)
- 计算机组装与维护论文 致谢,计算机组装与维护论文
- 看教程学虚幻四——粒子特效之魔法阵
- BodyContent揭秘及定制复杂的JSP标签
- 密歇根安娜堡大学计算机科学教授,UMich的EECS「密歇根大学安娜堡分校电气工程与计算机科学系」...
- 网上书店系统/书店管理系统的设计与实现
- JAVA学习笔记 03 - JAVA语言程序结构
- XJTU大计基第九周编程作业
- 学习Linux命令:关于ssh命令
热门文章
- lightroom 闪退_【Lightroom教程】3种校正白平衡的方法
- android开屏页单张图片设置的收评秒开引起的图片变形问题
- win10桌面计算机在哪里打开,Win10计算器在哪里?三种可以打开Win10计算器的方法图文介绍...
- 递归+回溯+DFS+BFS
- php中如何导出表格,PHP如何实现表格Excel的导出
- 吃鸡ios和android灵敏度,和平精英灵敏度怎么调最稳2020二指攻略:安卓苹果灵敏度调节方法大全[多图]...
- 【华为OD机试真题 Python】加扰字符串
- 关于登陆界面背景图片缩放变形的解决方法
- 名词解释:VG、PV、PP、LV、LP
- java读取 png_JAVA如何操作PNG图片