位置: IT常识 - 正文

大数据热点城市波动图案例【CSS3实现 + 原理分析 + 源码获取】(大数据热点话题)

编辑:rootadmin
大数据热点城市波动图案例【CSS3实现 + 原理分析 + 源码获取】 一:案例效果

       本次案例我们分析一下数据可视化页面最常见的热点图是如何实现的,其原理并不复杂,只需要用到CSS3动画属性 animation 以及 @keyframe 关键帧即可,重点是向外扩散的环如何布局比较合适,以及每个环怎么扩散何时扩散比较合适。

推荐整理分享大数据热点城市波动图案例【CSS3实现 + 原理分析 + 源码获取】(大数据热点话题),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:大数据谈论热点有,大数据热点新闻,大数据 城市,大数据热度,大数据热度,大数据热点分析,大数据热点话题,大数据的热点,内容如对您有帮助,希望把文章链接给更多的朋友!

大数据热点城市波动图案例【CSS3实现 + 原理分析 + 源码获取】(大数据热点话题)

二:源码获取

源码我已经上传到了资源里,想拿来学习引用的小伙伴直接下载即可,没有会员的可以私聊我 “大数据热点图” 免费获取,下方是源码的资源链接

大数据热点波动图,纯css3实现-Javascript文档类资源-CSDN下载通过css3动画设置的大数据热点波动图,主要利用了animation动画更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/weixin_52212950/86728456

三:原理分析

原理分析我们分为热点的布局分析与热点向外扩散的动画实现的分析

3.1 布局分析布局我们那单独的一个城市分析,例如地图中北京的 ,其由一个类名为city1的最外层盒子来添加定位以定到目标城市位置,其不设置宽高,大小完全由中心点撑起(即第二个类名为center的盒子) ,波纹其实是有三个圈圈组成的,最开始是完全重合的,用中心小算法来保证其永远是围绕center来扩散的。 <div class="city1"> <div class="center1"></div> <p class="bj">Beijing</p> <div class="bw1"></div> <div class="bw2"></div> <div class="bw3"></div> </div>波纹的样式添加我们采用了属性选择器 .city1 div[class^="bw"],即选择父类city1里面类名以bw开头的所有子div标签 .city1{ position: absolute; top: 370px; right: 403px; color: aliceblue; } .center1{ width: 5px; height: 5px; background-color: rgb(255, 255, 255); box-shadow: 0 0 12px 2px #fff; border-radius: 50%; } .city1 div[class^="bw"]{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 5px; height: 5px; box-shadow: 0 0 7px #fff; border-radius: 50%; animation: scla 3s linear infinite; } .map .city1 div.bw2{ animation-delay: 1s; } .map .city1 div.bw3{ animation-delay: 2s; }3.2 动画分析本次添加的关键帧为:0%的时候波纹是完全不透明的,50%的时候宽高均变大为105px,即圈圈在总动画时间50%的时候要从宽高5px扩散到宽高105px,然后变为半透明状态。再下一个是100%的时候,扩散到宽高150px,并变成完全不透明。要给波纹添加属性:animation: scla 3s linear infinite;  含义为3s做完动画,匀速,并且无限循环为了呈现出波纹一个接一个往外扩散而不是一起扩散,需要给第一个圈圈直接开始扩散,第二个圈圈第三个圈圈设置不同的 animation-delay 动画延迟,第二个设置为1s,第二个设置为2s,这样就可以呈现出一个接一个往外扩散了 /* @keyframes关键帧动画 */ @keyframes scla{ 0% { opacity: 1; } 50% { width: 105px; height: 105px; opacity: 0.5; } 100% { width: 150px; height: 150px; opacity: 0; } } .city3 div[class^="bw"]{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 5px; height: 5px; box-shadow: 0 0 7px #fff; border-radius: 50%; animation: scla 3s linear infinite; } .map .city3 div.bw2{ animation-delay: 1s; } .map .city3 div.bw3{ animation-delay: 2s; }四:主要代码<style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ background-color: rgb(45, 45, 45); } .map{ position: relative; width: 1400px; height: 830px; background-image: url(./img/QX3OPNW5qY.png); background-repeat: no-repeat; background-size: 100%; margin: 0 auto; } .bj{ position: absolute; top: 15px; left: 10px; font-size: 10px; } .Gambia{ position: absolute; top: 15px; left: 10px; font-size: 10px; color:rgb(255, 153, 153) } .Island{ position: absolute; top: 15px; left: 10px; font-size: 10px; } /* 城市1 */ .city1{ position: absolute; top: 370px; right: 403px; color: aliceblue; } .center1{ width: 5px; height: 5px; background-color: rgb(255, 255, 255); box-shadow: 0 0 12px 2px #fff; border-radius: 50%; } .city1 div[class^="bw"]{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 5px; height: 5px; box-shadow: 0 0 7px #fff; border-radius: 50%; animation: scla 3s linear infinite; } .map .city1 div.bw2{ animation-delay: 1s; } .map .city1 div.bw3{ animation-delay: 2s; } /* 城市2 */ .city2{ position: absolute; top: 500px; right: 703px; color: aliceblue; } .center2{ width: 5px; height: 5px; background-color: rgb(255, 255, 255); box-shadow: 0 0 12px 2px #fff; border-radius: 50%; } .city2 div[class^="bw"]{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 5px; height: 5px; box-shadow: 0 0 7px rgb(255, 149, 149); border-radius: 50%; animation: scla1 3s linear infinite; } .map .city2 div.bw2{ animation-delay: 0.75s; } .map .city2 div.bw3{ animation-delay: 1.5s; } .map .city2 div.bw4{ animation-delay: 2.25s; } /* 城市3 */ .city3{ position: absolute; top: 200px; right: 1003px; color: aliceblue; } .center3{ width: 5px; height: 5px; background-color: rgb(255, 255, 255); box-shadow: 0 0 12px 2px #fff; border-radius: 50%; } /* 属性选择器 正则表达式筛选bw开头类名 */ .city3 div[class^="bw"]{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 5px; height: 5px; box-shadow: 0 0 7px #fff; border-radius: 50%; animation: scla 3s linear infinite; } .map .city3 div.bw2{ animation-delay: 1s; } .map .city3 div.bw3{ animation-delay: 2s; } /* @keyframes关键帧动画 */ @keyframes scla{ 0% { opacity: 1; } 50% { width: 105px; height: 105px; opacity: 0.5; } 100% { width: 150px; height: 150px; opacity: 0; } } @keyframes scla1{ 0% { opacity: 1; } 50% { width: 285px; height: 285px; opacity: 0.5; } 100% { width: 330px; height: 330px; opacity: 0; } } </style></head><body> <div class="map"> <div class="city1"> <div class="center1"></div> <p class="bj">Beijing</p> <div class="bw1"></div> <div class="bw2"></div> <div class="bw3"></div> </div> <div class="city2"> <div class="center2"></div> <p class="Gambia">Gambia</p> <div class="bw1"></div> <div class="bw2"></div> <div class="bw3"></div> <div class="bw4"></div> </div> <div class="city3"> <div class="center3"></div> <p class="Island">Island</p> <div class="bw1"></div> <div class="bw2"></div> <div class="bw3"></div> </div> </div></body>
本文链接地址:https://www.jiuchutong.com/zhishi/299556.html 转载请保留说明!

上一篇:ansible命令 运维自动化工具(基于ansible的运维平台)

下一篇:【ChatGPT】ChatGPT 能否取代程序员?(chatb)

  • oppo reno 6语音助手怎么唤醒(opporeno6语音助手叫什么名字)

    oppo reno 6语音助手怎么唤醒(opporeno6语音助手叫什么名字)

  • 查植物品种的app(查各种植物的app)

    查植物品种的app(查各种植物的app)

  • 华为nova7如何隐藏应用(华为nova7如何隐藏应用图标)

    华为nova7如何隐藏应用(华为nova7如何隐藏应用图标)

  • 抖音关注请求怎么看不到(抖音关注请求怎么设置拒收)

    抖音关注请求怎么看不到(抖音关注请求怎么设置拒收)

  • 为什么手机qq共享屏幕播放视频没有声音(为什么手机QQ共享屏幕播放的视频没有声音)

    为什么手机qq共享屏幕播放视频没有声音(为什么手机QQ共享屏幕播放的视频没有声音)

  • 苹果爱思助手是干嘛的(苹果爱思助手是盗版吗)

    苹果爱思助手是干嘛的(苹果爱思助手是盗版吗)

  • 水印相机图片保存失败是什么原因(水印相机图片保存失败苹果手机)

    水印相机图片保存失败是什么原因(水印相机图片保存失败苹果手机)

  • 华为畅享7录屏不见了(华为畅享7录屏在手机找不到)

    华为畅享7录屏不见了(华为畅享7录屏在手机找不到)

  • 手机锁屏后出现广告怎么关闭(手机锁屏后出现抖音视频提示怎么设置)

    手机锁屏后出现广告怎么关闭(手机锁屏后出现抖音视频提示怎么设置)

  • qq怎么看资料卡(qq怎么看资料卡片)

    qq怎么看资料卡(qq怎么看资料卡片)

  • mkv2格式用什么播放器(mkv1格式用什么播放器)

    mkv2格式用什么播放器(mkv1格式用什么播放器)

  • excel序列包括哪几种(excel里序列在哪里设置的)

    excel序列包括哪几种(excel里序列在哪里设置的)

  • 家里有网线可不可以直接买路由器使用无线网(家里有网线可不可以直接买路由器就可以装电脑了)

    家里有网线可不可以直接买路由器使用无线网(家里有网线可不可以直接买路由器就可以装电脑了)

  • 换新手机微信聊天记录还有吗(换新手机微信聊天记录还在吗)

    换新手机微信聊天记录还有吗(换新手机微信聊天记录还在吗)

  • word艺术字体怎么设置(word艺术字体怎么设置上下环绕)

    word艺术字体怎么设置(word艺术字体怎么设置上下环绕)

  • 卖了天猫积分对淘宝号有影响吗(天猫积分卖钱)

    卖了天猫积分对淘宝号有影响吗(天猫积分卖钱)

  • 小米6支持18w快充吗(小米6支持55w快充吗)

    小米6支持18w快充吗(小米6支持55w快充吗)

  • 在wps中如何画横线(在wps中如何画横线和竖线)

    在wps中如何画横线(在wps中如何画横线和竖线)

  • 华为b3手环怎么接电话(华为B3手环怎么充电)

    华为b3手环怎么接电话(华为B3手环怎么充电)

  • 苹果11上面的刘海怎么才能不显示(苹果11为啥有个小刘海)

    苹果11上面的刘海怎么才能不显示(苹果11为啥有个小刘海)

  • 怎么找回京东以前账号(怎么找回京东以前买的物品 账号不记得)

    怎么找回京东以前账号(怎么找回京东以前买的物品 账号不记得)

  • 淘宝的闲鱼平台在哪里(淘宝上面的闲鱼怎么样)

    淘宝的闲鱼平台在哪里(淘宝上面的闲鱼怎么样)

  • 拼多多怎么关闭消息震动(拼多多怎么关闭别人看到我买的东西)

    拼多多怎么关闭消息震动(拼多多怎么关闭别人看到我买的东西)

  • 怎样拦截骚扰来电(怎样拦截骚扰来电电话)

    怎样拦截骚扰来电(怎样拦截骚扰来电电话)

  • 华为fla一tl10是什么型号(华为fla—tl10)

    华为fla一tl10是什么型号(华为fla—tl10)

  • 【WebSocket 协议】Web 通信的下一步进化(websocket tcpsocket)

    【WebSocket 协议】Web 通信的下一步进化(websocket tcpsocket)

  • 房产税如何交
  • 租的房子装修费如何入账
  • 房地产企业拆迁补偿费契税12366
  • 飞机票抵扣进项税怎么计算民航发展基金
  • 季度三十万,是不含税额吗
  • 营业执照经营范围劳务怎么写
  • 税控盘怎么增加专票
  • 公司借股东钱支付的利息如何做账?
  • 宣传费税前扣除标准
  • 自产自销免税物品包括哪些
  • 销售现金券会计分录
  • 分公司单独做账吗
  • 报销凭证找不到了怎么办
  • 离职补偿金公司不付怎么办
  • 自然人股权出资 税收优惠政策
  • 房地产开发经营属于什么行业类别
  • 增值税发票二联折叠票样式
  • 职工教育扣除标准是什么
  • 受托加工物资的账务处理例题
  • 企业为员工缴纳社保可以抵税吗
  • 手机网速测试怎么看多少兆网
  • 公司购车要交哪些税
  • 增值税专用发票的税率是多少啊
  • 合同资产减值怎么填
  • androirc下载
  • 销售折让负数发票如何入账
  • 折旧计算表属于外来原始凭证吗
  • 白条入账会计要负刑事责任吗
  • 企业对员工罚款的法律依据
  • 源码阅读技巧
  • php出现错误代码怎么办
  • 让渡资产使用权包含哪些内容
  • 劳务公司差额计税的税率
  • 无法登陆p.to
  • python怎么学
  • php语言采用什么方式执行
  • php远程访问
  • 残疾证哪里发
  • wordpress小工具开发
  • 长期股权投资成本怎么计算
  • 代收通行费不征消费税
  • 存根联是自己留着吗
  • 接受捐赠收入要缴纳企业所得税吗
  • 运输费用会计
  • 培训费属于什么
  • 固定资产盘盈为什么计入管理费用
  • 个税申报可以去税务局吗
  • 公司承担员工的个税怎么做账
  • 企业股东分红是按会计利润还是税务利润
  • 房地产开发公司注册资金要求
  • 办公装修费用多少
  • 知识产权申请如何申请
  • 缴纳房产税如何做账务处理
  • 先开发票钱后进怎样做帐?
  • 网店会计怎么做账
  • 其他收入属于什么收入
  • 在MySQL中使用GTIDs复制协议和中断协议的教程
  • centos6.5安装教程中文
  • sql多表连接查询(详细实例)
  • 拨开层层迷雾是什么歌
  • use crt secure
  • freebsd 升级
  • win7系统怎么查看
  • w10英雄联盟老是崩溃
  • win10预览版21277
  • ubuntu系统中怎么重启proftpd程序
  • windows8怎么设置
  • win7更改电脑设置在哪里
  • win8如何安装
  • python def用法理解
  • python模拟用户登录过程,输入账号及密码
  • arcgis engine+c#实例开发教程
  • javascript函数大全
  • js中eval函数是干嘛的
  • jquery插件使用
  • 吉林省地方税务局
  • 主管税务机关指的是
  • 昆明国家高新技术产业开发区管理委员会官方门户网站
  • 济宁任城区多大面积
  • 城市维护建设税怎么算
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设