HTML5超炫3D雷达扫描地图玩法

最新推荐文章于 2021-06-21 18:09:06 发布
最新推荐文章于 2021-06-21 18:09:06 发布
阅读量1.8k 收藏 7
点赞数 2
分类专栏： 玩物丧志 文章标签： HTML5超炫玩法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44904493/article/details/89215123
版权
本文介绍如何使用HTML5和CSS3创建具有3D立体效果的雷达扫描地图。当点击雷达时，地图会显示并详细标注特定地点的坐标信息。HTML代码主要为一个div容器，CSS代码运用旋转动画呈现雷达动画，而JavaScript则负责添加元素和切换3D地图上的标注信息。
摘要由CSDN通过智能技术生成

使用HTML5和CSS3实现雷达扫描超炫丽效果，它的一大特点是3D立体的视觉效果，鼠标点击雷达后将会展现一张3D立体地图，并且对地图上指定的几个地点进行坐标详细信息描述。

下面我讲解一下我是怎么写的

HTML代码

首先HTML代码非常简单，只需在页面上展示一个div容器即可。

<div class="radar"></div>

CSS代码

这里主要利用了CSS3的旋转等动画特性，看看以下的CSS代码，主要是完成所有的动画：

@-webkit-keyframes flashing {
  0%,
  30% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  70%,
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}
@keyframes flashing {
  0%,
  30% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  70%,
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}
@-webkit-keyframes pulsation {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    border-color: red;
    background-color: rgba(255, 0, 0, 0.6);
  }
  80%,
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    border-color: rgba(255, 0, 0, 0.2);
    background-color: rgba(255, 0, 0, 0.1);
  }
}
@keyframes pulsation {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    border-color: red;
    background-color: rgba(255, 0, 0, 0.6);
  }
  80%,
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    border-color: rgba(255, 0, 0, 0.2);
    background-color: rgba(255, 0, 0, 0.1);
  }
}
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg) translateZ(1px);
            transform: rotate(0deg) translateZ(1px);
  }
  to {
    -webkit-transform: rotate(360deg) translateZ(1px);
            transform: rotate(360deg) translateZ(1px);
  }
}
@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg) translateZ(1px);
            transform: rotate(0deg) translateZ(1px);
  }
  to {
    -webkit-transform: rotate(360deg) translateZ(1px);
            transform: rotate(360deg) translateZ(1px);
  }
}
@-webkit-keyframes scale {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
}
@keyframes scale {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
}
@-webkit-keyframes polish {
  30%,
  100% {
    -webkit-transform: skewX(35deg) translateX(380%);
            transform: skewX(35deg) translateX(380%);
  }
}
@keyframes polish {
  30%,
  100% {
    -webkit-transform: skewX(35deg) translateX(380%);
            transform: skewX(35deg) translateX(380%);
  }
}

当然这个雷达光是有动画是不行的，还得有漂亮的外观，用以下CSS代码实现：

.radar {
  height: 40em;
  width: 48em;
  position: relative;
  cursor: pointer;
  -webkit-perspective: 62.5em;
          perspective: 62.5em;
}
.radar .radar-map-container,
.radar .risk-points,
.radar .scanning-circle canvas {
  left: 0;
  top: 0;
  position: absolute;
}
.radar .radar-map-container,
.radar .radar-map,
.radar .scanning-circle,
.radar .risk-elements-group {
  -webkit-transition: opacity 2.5s ease-out, -webkit-transform 2.5s ease-out, -webkit-transform-origin;
  transition: opacity 2.5s ease-out, -webkit-transform 2.5s ease-out, -webkit-transform-origin;
  transition: transform 2.5s ease-out, opacity 2.5s ease-out, transform-origin;
  transition: transform 2.5s ease-out, opacity 2.5s ease-out, transform-origin, -webkit-transform 2.5s ease-out, -webkit-transform-origin;
}
.radar .radar-map-container,
.radar .radar-map,
.radar .scanning-circle {
  will-change: transform;
}
.radar .radar-map-container {
  width: 400%;
  height: 400%;
  left: -150%;
  top: -150%;
  -webkit-transform: scale(0.25);
          transform: scale(0.25);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.radar .radar-map {
  color: rgba(19, 182, 206, 0.4);
  background: url('http://i64.tinypic.com/5l17ut.jpg') center / contain no-repeat;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.radar .radar-map.roaming {
  -webkit-transition-duration: 5s !important;
          transition-duration: 5s !important;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
  -webkit-transition-delay: .5s;
          transition-delay: .5s;
}
.radar .radar-map .risk-elements-group {
  opacity: 0;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.radar .radar-map .risk-elements-group .red-flag,
.radar .radar-map .risk-elements-group .info-panel,
.radar .radar-map .risk-elements-group .dashed-circle {
  position: absolute;
}
.radar .radar-map .risk-elements-group .red-flag,
.radar .radar-map .risk-elements-group .dashed-circle {
  visibility: hidden;
}
.radar .radar-map .risk-elements-group .red-flag,
.radar .radar-map .risk-elements-group .info-panel {
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
  -webkit-transform: rotateX(-70deg);
          transform: rotateX(-70deg);
}
.radar .radar-map .risk-elements-group .red-flag {
  width: 0.5em;
  height: 10em;
  background-color: white;
  -webkit-transform: rotateX(-70deg) rotateZ(-90deg);
          transform: rotateX(-70deg) rotateZ(-90deg);
}
.radar .radar-map .risk-elements-group .red-flag.stand-up {
  -webkit-transform: rotateX(-70deg);
          transform: rotateX(-70deg);
  visibility: visible;
}
.radar .radar-map .risk-elements-group .red-flag:before {
  content: attr(data-city);
  font-weight: bold;
  color: white;
  position: absolute;
  background-color: red;
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
  -moz-clip-path: polygon(0 0, 100% 50%, 0 100%);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  width: 4.782608695652174em;
  height: 3.4782608695652173em;
  line-height: 3.4782608695652173em;
  font-size: 1.4375em;
  font-family: 微软雅黑;
  letter-spacing: 0.43478260869565216em;
  padding-left: 0.5217391304347826em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  top: 0.43478260869565216em;
  white-space: nowrap;
}
.radar .radar-map .risk-elements-group .red-flag:after {
  content: '';
  position: absolute;
  width: 2.1875em;
  height: 0.625em;
  border-radius: 50%;
  background-color: inherit;
  top: calc(100% - 0.625em);
  left: calc(50% - 1.09375em);
}
.radar .radar-map .risk-elements-group .info-panel {
  -webkit-transform: rotateX(-70deg) translateY(-30%);
          transform: rotateX(-70deg) translateY(-30%);
  -webkit-filter: opacity(0);
  -moz-filter: opacity(0);
  filter: opacity(0);
  border: 0.0625em solid #DCDA6B;
  border-radius: 0.25em;
  background-color: rgba(245, 228, 158, 0.31);
  display: table;
  font-weight: bold;
  font-size: 2.5em;
  text-shadow: 0.025em 0.025em 0.05em black;
  padding: 0.2em 0.3em;
  font-family: 黑体;
  overflow: hidden;
}
.radar .radar-map .risk-elements-group .info-panel.showup {
  -webkit-filter: opacity(1);
  -moz-filter: opacity(1);
  filter: opacity(1);
  transition: -webkit-filter 1s linear 0.5s, -moz-filter 1s linear 0.5s, filter 1s linear 0.5s, opacity 0.5s linear;
}
.radar .radar-map .risk-elements-group .info-panel.polish:after {
  -webkit-animation: polish 5s linear 1 1s;
          animation: polish 5s linear 1 1s;
}
.radar .radar-map .risk-elements-group .info-panel .info-title {
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(208, 209, 120, 0.6)), to(rgba(223, 226, 183, 0.05)));
  background-image: linear-gradient(to right, rgba(208, 209, 120, 0.6), rgba(223, 226, 183, 0.05));
  color: #FFE401;
  padding: 0 0.275em;
  border-radius: inherit;
}
.radar .radar-map .risk-elements-group .info-panel .info-content {
  color: white;
  margin: 0.25em;
  line-height: 1.3em;
}
.radar .radar-map .risk-elements-group .info-panel:after {
  content: '';
  position: absolute;
  width: 30%;
  height: 100%;
  -webkit-transform: skewX(35deg) translateX(-160%);
          transform: skewX(35deg) translateX(-160%);
  top: 0;
  background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(rgba(255, 255, 255, 0.3)), to(transparent));
  background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
}
.radar .radar-map .risk-elements-group .dashed-circle {
  width: 7.5em;
  height: 7.5em;
  border-radius: 50%;
  background: center / contain no-repeat;
  -webkit-animation: rotation 5s linear infinite;
          animation: rotation 5s linear infinite;
  -webkit-transition-property: visibility;
  transition-property: visibility;
}
.radar .radar-map .risk-elements-group .dashed-circle:after {
  content: '';
  border-radius: inherit;
  margin: auto;
  width: 15%;
  height: 15%;
  background-color: #E03636;
  -webkit-box-shadow: 0 0 0.9375em black;
          box-shadow: 0 0 0.9375em black;
  -webkit-animation: scale 1s linear infinite alternate;
          animation: scale 1s linear infinite alternate;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.radar .changing-number-container {
  position: absolute;
  right: 12%;
  top: 10%;
  bottom: 0;
  margin: auto;
}
.radar .changing-number-container {
  display: table;
  color: #10ABE0;
}
.radar .changing-number-container:before,
.radar .changing-number-container:after {
  display: inline-block;
}
.radar .changing-number-container:before {
  content: '';
  background: -webkit-gradient(linear, left top, left bottom, color-stop(45%, transparent), color-stop(55%, currentColor), color-stop(55%, transparent)) center / 100% 1em;
  background: linear-gradient(to bottom, transparent 45%, currentColor 55%, transparent 55%) center / 100% 1em;
  width: 1em;
  height: 100%;
  margin-right: 0.625em;
}
.radar .changing-number-container:after {
  font-size: 0.75em;
  content: attr(data-number);
  width: 1.3333333333333333em;
  line-height: 1.3333333333333333em;
  word-break: break-all;
  letter-spacing: 1.3333333333333333em;
  vertical-align: top;
  font-weight: bold;
}
.radar .risk-points {
  z-index: 15;
}
.radar .risk-points .risk-point-group .risk-point {
  position: absolute;
  width: 0.625em;
  height: 0.625em;
  border-radius: 50%;
  -webkit-filter: blur(2px);
}
.radar .risk-points .risk-point-group .risk-point:after {
  content: '';
  display: block;
  height: 100%;
  border-radius: 50%;
  will-change: transform;
  -webkit-transform: scale(0);
          transform: scale(0);
}
.radar .risk-points .risk-point-group .risk-point.type1:after {
  -webkit-box-shadow: 0 0 0.3125em 0.3125em white inset, 0 0 0.3125em 0.5625em rgba(245, 76, 128, 0.54), 0 0 2.5625em 1.5625em rgba(222, 17, 17, 0.89);
          box-shadow: 0 0 0.3125em 0.3125em white inset, 0 0 0.3125em 0.5625em rgba(245, 76, 128, 0.54), 0 0 2.5625em 1.5625em rgba(222, 17, 17, 0.89);
}
.radar .risk-points .risk-point-group .risk-point.type2:after {
  -webkit-box-shadow: 0 0 0.3125em 0.3125em white inset, 0 0 0.3125em 0.5625em #15d8e8, 0 0 2.5625em 1.5625em rgba(44, 218, 226, 0.89);
          box-shadow: 0 0 0.3125em 0.3125em white inset, 0 0 0.3125em 0.5625em #15d8e8, 0 0 2.5625em 1.5625em rgba(44, 218, 226, 0.89);
}
.radar .risk-points .risk-point-group .risk-point.critical {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.radar .risk-points .risk-point-group .risk-point.ordinary {
  -webkit-transform: scale(0.4);
          transform: scale(0.4);
}
.radar .risk-points .risk-point-group .risk-point.pulsation {
  color: red;
  -webkit-filter: none;
  width: 5em;
  height: 5em;
}
.radar .risk-points .risk-point-group .risk-point.pulsation .pulse-circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 0.1875em solid currentColor
最低0.47元/天 解锁文章
weixin_44904493
关注
专栏目录
HTML5+CSS3小实例：雷达扫描特效
艾恩小灰灰的博客
06-06 617
HTML5+CSS3做一个雷达扫描特效，代码不多，也不难，知识点是CSS的线性渐变和径向渐变，学会这个案例，相信你对渐变会有一个新的认识。加油，学起来吧！效果： 源码：
HTML5 Canvas实现雷达扫描动画特效
09-25
这是一款基于HTML5 Canvas实现的雷达扫描动画特效源码，canvas是HTML5特有的画布工具，我们可以在canvas上绘制任意元素，包括3D元素。这款雷达扫描动画就是利用了canvas的灵活特性，利用js在canvas上绘制这些美丽的扫描线条。此外这款源码还提供了点击绘制的功能，用户可以根据自己的喜好绘制出新的类似雷达扫描特效的图形。
html雷达扫描插件,雷达图生成插件
weixin_36489344的博客
06-21 941
一. 使用方法：1.1 引入组件资源需要在页面中首先引入radarChart.js和radarChart.css：2.2 使用radarChart.init()方法构建雷达图：radarChart.init(jsDomElement,options);譬如：radarChart.init(document.querySelector("#radar1"),{data:{maxValue:[...
html5 css3 雷达,CSS3 实现雷达扫描图的示例代码
weixin_39926191的博客
06-18 360
通过css3实现炫酷的雷达扫描图：直接上代码：// index.html雷达扫描图//index.css* {box-sizing: border-box;}html {height: 100%;background-color: #111;font-size: 10px;}body {background-image:linear-gradient(0deg, transparent 24%, ...
HTML5 3D地图旋转
09-04
HTML5 3D地图旋转 。
HTML5超炫3D元素周期表三维图片墙模板源码
最新发布
04-09
HTML5超炫3D元素周期表三维图片墙模板源码，代码上手简单，代码独立，可以直接使用。也可直接预览效果。别再犹豫了，一起加入这个源码的世界吧！博主提供各种支持，欢迎合作共赢。 效果演示地址： ...
HTML5超炫3D元素周期表三维图片墙效果
10-10
在本项目中，“HTML5超炫3D元素周期表三维图片墙效果”是一个利用HTML5特性实现的创新性展示方式，它将传统的元素周期表与现代3D视觉效果相结合，为用户带来全新的浏览体验。 首先，我们要理解3D效果是如何在HTML5...
HTML5超炫3D元素周期表三维图片墙效果.zip_3d元素周期表_3d图片墙html_html5 3d_whalecmf_其他
09-20
本资源"HTML5超炫3D元素周期表三维图片墙效果.zip"就是一个利用HTML5技术实现的创新示例，旨在展示3D元素周期表和3D图片墙的效果。下面我们将深入探讨相关的知识点。 1. **HTML5 3D效果**： HTML5引入了`<canvas>`...
超炫的3D地图 深圳区域地图
01-02
本项目聚焦于“超炫的3D地图——深圳区域地图”，利用高德地图底图这一强大的地图服务，打造了一款能够详细展示深圳地图信息的应用。 首先，我们要了解高德地图底图。高德地图是中国领先的数字地图提供商之一，它...
HTML雷达扫描动画
07-16
HTML5雷达扫描动画代码是一款HTML5 Canvas实现的逼真显示器雷达扫描动画代码。
HTML5实现的超酷3D实景地图动画特效源码
07-16
HTML5实现3D效果实景地图，是一款3D实景地图，截取了实景的房屋大厦，并且可以旋转展示，具有非常强的立体效果！
cesium+HTML5+3D地图展示
08-27
cesium+HTML5+3D地图展示
html3D地图
08-15
html3D地图,下载下来直接可以使用观看，3D效果非常好。
雷达扫描效果三维地图GIS大数据可视化
04-24
随着大数据、云计算、物联网的诞生、大量的设备数据、传感器数据、行为数据、日志数据、基础画像数据、运行数据等等都对传统的数据展现提出了新的要求 。随着前端技术的不断成熟，客户对业务系统的要求也由原来的简单实现功能上升到，漂亮、直观、易用、有科技未来感。因此系统的可视化难度加大，我们大多数客户的业务系统都需要可视化大屏的统计分析，甚至部分管理系统也被要求做成图表、地图、三维可视化，VR、AR，三维仿真、地理信息系统等等被要求深度结合业务，这在设计上有一定的难度，而且设计完成了大部分开发难度非常大，不过好在得益于技术的日渐进步，已经有大部分优秀的开源项目和插件可以实现和满足部分可视化的要求。数据分析的需求猛增，那么我们分析后的数据展示也成为目前比较热门的方向。数据可视化，我们常见的有表格、图标、图表、柱状图、折线图、雷达图、漏斗图、等值面图、等值线图、GIS地图、蜂窝图、格点数据、热力图、柱状图、饼图、散点图、地理坐标/地图、K 线图、雷达图、盒须图、热力图、关系图、路径图、树图、矩形树图、旭日图、平行坐标系、桑基图、漏斗图，三维模型可视化等等展现方式。 本节课我们主要以百度地图结合map
html扫描动画效果,HTML5 简单的雷达扫描动画（带目标物）
weixin_42505246的博客
06-04 568
CSS语言：CSSSCSS确定* {-webkit-box-sizing: border-box;box-sizing: border-box;}#radar {position: relative;width: 300px;height: 300px;margin: auto;background: #222;overflow: hidden;border: 2px solid #8ba892;...
html 类似雷达扫描效果 及 闪屏效果
Hermitks_k
02-07 201
//雷达扫描效果 1 <em id="Radar" class="RadarFast"></em> css: .RadarFast{ position: absolute; z-index: 10; bottom: 140px; left: 50%; margin-left: -3px; } .RadarFast:after{ content: ''; position: absol.
扫描转换html,HTML5/CSS3 3D雷达扫描动画
weixin_34079177的博客
05-31 558
本文作者html5tricks，转载请注明出处之前我们分享过一款纯CSS3雷达扫描模拟动画，看起来十分炫酷。这次我们分享的另外一款雷达动画更加让人震撼，它是基于下面我们一起来解析一下这款炫酷的HTML代码首先HTML代码非常简单，只需在页面上展示一个div容器即可。CSS代码这里主要利用了CSS3的旋转等动画特性，看看以下的CSS代码，主要是完成所有的动画：@-webkit-keyframes f...
css雷达+3D地图
08-23
非常酷炫的雷达扫描和3D地图，css+js+html前端学习专用
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值