位置: 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)

  • cpu占用过高会怎么样(cpu占用过高怎么办)(cpu占用过高怎么处理)

    cpu占用过高会怎么样(cpu占用过高怎么办)(cpu占用过高怎么处理)

  • 电脑录屏怎么把声音录进去(电脑录屏怎么把人像录进去)

    电脑录屏怎么把声音录进去(电脑录屏怎么把人像录进去)

  • 小米8重量多少克(小米8多重多少克)

    小米8重量多少克(小米8多重多少克)

  • 微信透明消息怎么发(微信透明消息怎么发送)

    微信透明消息怎么发(微信透明消息怎么发送)

  • 苹果Xr应该怎么截屏(iphone xr小技巧)

    苹果Xr应该怎么截屏(iphone xr小技巧)

  • 拼多多代付退款是退到哪里(拼多多代付退款怎样才能能退给自己)

    拼多多代付退款是退到哪里(拼多多代付退款怎样才能能退给自己)

  • 快手号是什么(周也的快手号是什么)

    快手号是什么(周也的快手号是什么)

  • pad版钉钉可以共享屏幕嘛(钉钉在平板上可以共享屏幕吗)

    pad版钉钉可以共享屏幕嘛(钉钉在平板上可以共享屏幕吗)

  • 演示文稿和幻灯片的区别是什么(演示文稿幻灯片有哪四种视图模式)

    演示文稿和幻灯片的区别是什么(演示文稿幻灯片有哪四种视图模式)

  • word里的文字怎样完全删除(word里的文字怎么转到excel)

    word里的文字怎样完全删除(word里的文字怎么转到excel)

  • 钉钉电脑版怎么进入(钉钉电脑版怎么退出登录)

    钉钉电脑版怎么进入(钉钉电脑版怎么退出登录)

  • 苹果手机微信怎么下载不了(苹果手机微信怎么双开)

    苹果手机微信怎么下载不了(苹果手机微信怎么双开)

  • lon-al00是华为什么型号(lonal00是华为什么型号手机什么时候上市的)

    lon-al00是华为什么型号(lonal00是华为什么型号手机什么时候上市的)

  • trt-al00是华为什么型号(华为trt_al00a什么型号)

    trt-al00是华为什么型号(华为trt_al00a什么型号)

  • 微博上传图片失败怎么回事(微博上传图片显示不全)

    微博上传图片失败怎么回事(微博上传图片显示不全)

  • word文档怎么把文字放大(word文档怎么把一页变成横向)

    word文档怎么把文字放大(word文档怎么把一页变成横向)

  • 企鹅影院和腾讯视频一样吗(企鹅影院和腾讯会员通用吗)

    企鹅影院和腾讯视频一样吗(企鹅影院和腾讯会员通用吗)

  • vblog是什么(vbbyval什么意思)

    vblog是什么(vbbyval什么意思)

  • win10怎么把分盘合并(win10分盘怎么分)

    win10怎么把分盘合并(win10分盘怎么分)

  • 华为watch gt2怎么重启(华为watchgt2怎么充电)

    华为watch gt2怎么重启(华为watchgt2怎么充电)

  • java中0.6332的数据类型

    java中0.6332的数据类型

  • 12306候补排位是什么意思(12306候补是排队吗)

    12306候补排位是什么意思(12306候补是排队吗)

  • Win10 Dev 预览版 20279(FE_RELEASE)更新详解(win10 dev版本)

    Win10 Dev 预览版 20279(FE_RELEASE)更新详解(win10 dev版本)

  • 图卷积神经网络GCN、GAT的原理及Pytorch实现(图卷积神经网络原理)

    图卷积神经网络GCN、GAT的原理及Pytorch实现(图卷积神经网络原理)

  • Python学习:数据类型转换的方法教程(python数据编程)

    Python学习:数据类型转换的方法教程(python数据编程)

  • 城市维护建设税优惠政策
  • 工程材料发票备注要求
  • 暂缓收缴工会经费的请示
  • 不动产销售额怎么填
  • 跨年度退货可以开红字发票吗
  • 旅游服务住宿费入什么科目
  • 做账要不要入库单和出库单
  • 房产税原值是否包括土地
  • 公司卖房产怎么缴税
  • 项目规划设计费用取费标准
  • 支付城镇土地使用税会计科目
  • 收到合同款
  • 租赁汽车油费可以抵扣吗
  • 委托代销收取手续费账务处理
  • 出纳现金日记账表格模板
  • 劳务发票属地原则
  • 开具增值税发票销货清单的最新规定是什么
  • 发票从7月1日起开
  • 股息收入属于应税收入吗
  • 领专票需要带什么东西
  • 怎么计算房产税率
  • windows 11怎么样
  • 如何增强无线网卡的接收能力
  • 重置组策略命令
  • 购买股票的会计分录
  • 暂估成本会计分录
  • 高温补贴需要缴纳社会保险费吗
  • 最贵的冰箱是多少钱
  • 私营独资企业交个税怎么交
  • 管理费用属于损益类吗
  • 企业所得税征收方式有哪些?
  • 长期资产的减值和流动资产的减值的区别
  • 气象数据32766
  • php常用加密技术
  • lspv命令详解
  • 固定资产记到什么账本
  • 进项大于销项怎么做分录
  • 工会经费缴纳方式的文件
  • python中map和filter有啥区别
  • 大病医疗保险是社保吗
  • 给第三方的销售怎么做
  • 数据结构—python语言描述
  • 交易性金融资产入账价值怎么计算
  • 资产负债表的种类
  • 可供出售金融资产名词解释
  • 资本公积现金流量表里放在哪里
  • 固定资产清理属于什么科目借方增加还是减少
  • 往来款是什么意思
  • 企业所得税汇算表
  • 制造企业费用会计
  • 在建工程进项税额转出会计分录
  • 自产自销免税发票可以抵税吗
  • 销项负数发票开了需要给对方重开发票吗?
  • 投资者投入无形资产的入账价值
  • 工业企业销售商品分录
  • mysql不同数据库不同数据表导入数据
  • win7显示无线网络未连接
  • ias.exe是什么程序
  • 关于linux操作系统的描述中
  • win 7系统双独立显卡设置
  • windows10无法识别
  • Access to the path "LibraryUnityAssembliesUnityEngine.xml" is denied.
  • 在布局中使用选定的比例
  • Lesson01_01 HTML基础
  • css网站布局实录 pdf
  • 数据结构 二叉树什么是孩子数
  • Windows上安装Python
  • python从入门到精通百度云
  • jquery倒计时代码
  • js实现点击按钮移动滑块到另一个按钮的方法
  • javascript核心技术开发解密
  • webview自定义视频播放器
  • javascript位置属性
  • js中类
  • 银行赠送礼品活动方案
  • 智行火车票电子报销凭证
  • 转让土地的土地增值税
  • 免抵税额在增值税申报表附表
  • 发票开票系统可以查询上一年发票吗?
  • 契税有发票吗,还是纳税证明
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设