Echarts大屏可视化_02 球体模块制作

news/2024/4/17 17:31:46

继续跟着b站大佬pink老师学大屏可视化

球体模块制作

1.球体模块布局

HTML

      <div class="column"><div class="no"><div class="no-hd"><ul><li>125811</li><li>104563</li></ul></div><div class="no-bd"><ul><li>前端需求人数</li><li>市场供应人数</li></ul></div></div><div class="map"><div class="map1"></div></div></div>

CSS

使用定位直接定位模块的位置,使用背景大小进行伸缩的控制,并设置透明度。

/* 旋转球体模型 */
.map {position: relative;height: 10.125rem;/* 球体 */.map1 {width: 6.475rem;height: 6.475rem;position: absolute;top: 50%;left: 50%;background: url(/images/map.png);background-size: 100% 100%;transform: translate(-50%, -50%);opacity: 0.3;}
}

2.旋转球体旋转模块实现

旋转球体模块的实现我们还是需要使用背景图结合CSS3的动画效果做

1.HTML

<div class="map"><div class="map1"></div><div class="map2"></div>
</div>

 2.CSS

注意: 这里涉及到了一个CSS3 旋转动画的写法。

模块本质上还是使用定位效果将球体模块定位过去,使用背景展现出来。结合C3的旋转动画进行旋转 注意!C3的旋转指令里需要一直设置他的translate位置。不然他会飘到别的地方去。 还有就是transform属性只能有一个 所以属性要堆积写,不能写出两个tranfrom来。

/* 旋转球体模型 */
.map {position: relative;height: 10.125rem;/* 球体 */.map1 {width: 6.475rem;height: 6.475rem;position: absolute;top: 50%;left: 50%;background: url(/images/map.png);background-size: 100% 100%;transform: translate(-50%, -50%);opacity: 0.3;}/* 旋转球体模块制作 */.map2{position: absolute;top: 50% !important;left: 50% !important;transform: translate(-50%, -50%);width: 8.0375rem;height: 8.0375rem;background: url(/images/lbx.png);animation: rotate1 15s linear infinite;background-size: 100% 100%;}@keyframes rotate1 {from { transform: translate(-50%, -50%) rotate(0deg);}to {transform: translate(-50%, -50%) rotate(360deg);}}
}

3.旋转箭头模块实现

 箭头的实现原理上跟旋转小求是一样的,背景图结合CSS3。只不过是旋转的方向倒置过来就行了。

1.HTML

<div class="map"><div class="map1"></div><div class="map2"></div><div class="map3"></div>
</div>

2.CSS

  /* 旋转箭头实现 */.map3{position: absolute;top: 50% !important;left: 50% !important;transform: translate(-50%, -50%);width: 7.075rem;height: 7.075rem;background: url(/images/jt.png);animation: rotate2 10s linear infinite;background-size: 100% 100%;}@keyframes rotate2 {from { transform: translate(-50%, -50%) rotate(0deg);}to {transform: translate(-50%, -50%) rotate(-360deg);}}

为了展示效果没有设置map2 和 map3的透明度 可以设置为0.6 就跟原型一样了。 


https://www.xjx100.cn/news/3118966.html

相关文章

Oracle研学-基础操作

学自B站黑马程序员笔记 一 创建表空间(创建数据文件) 创建表空间同时会创建一个数据文件(下面5行应该是一句话)&#xff0c;表空间在PLSQL的Object的tablespace中可以看到 create tablespace waterboss //创建表空间 datafile c:\waterboss.dbf //创建表空间对应的…

前端纯js导入导出json配置文件

在做后台系统需求的时候&#xff0c;有个需求是需要把当前表单配置导出&#xff0c;在另一个配置项下&#xff0c;导入这些配置&#xff0c;相当于做了一下配置拷贝。通常我们导出下载一个文件&#xff0c;是先向后端发起请求&#xff0c;由后端处理数据后&#xff0c;再返回文…

37 - 数据库参数设置优化,失之毫厘差之千里

MySQL 是一个灵活性比较强的数据库系统&#xff0c;提供了很多可配置参数&#xff0c;便于我们根据应用和服务器硬件来做定制化数据库服务。如果现在让你回想&#xff0c;你可能觉得在开发的过程中很少去调整 MySQL 的配置参数&#xff0c;但我今天想说的是我们很有必要去深入了…

记一次mysql 3306端口映射到外网 frp

通过下面命令启动被访问机器的frp nohup ./frps -c ./frps.toml & 记一次mysql 3306端口映射到外网 坑 mysql本身没有配置远程访问 frp配置错误&#xff0c;没注意中文单引号和英文单引号的区别 mysql本身没有配置远程访问 问题 navacat 远程链接mysql 出现 Lost c…

IDEA专栏—重装IDEA的配置

文章目录 1、maven路径2、默认文件路径3、插件4、导包顺序5、快捷键6、调整配置插件 1、maven路径 2、默认文件路径 3、插件 4、导包顺序 import static all other imports <blank line> import java.* import javax.* <blank line> import all other imports <…

【华为交换】交换机聚合接口配置(Eth-trunk)

功能简介 Eth-Trunk又叫以太网链路聚合Eth-Trunk&#xff0c;它通过将多条以太网物理链路捆绑在一起成为一条逻辑链路。达到增加链路带宽的目的。在实现增大带宽目的的同时&#xff0c;Eth-Trunk采用备份链路的机制&#xff0c;可以有效的提高设备之间链路的可靠性。每个聚合组…

华为智能手表独立导航,一呼即应轻松畅行

PetalMaps 手表独立导航&#xff0c;一声令下唤醒导航&#xff0c;打造了智慧的语音交互唤醒体验功能。导航时&#xff0c;语音播报、变道震动提醒功能&#xff0c;让您尽情体验腕上导航乐趣&#xff0c;同时又能安全抵达目的地。

运维笔记111

运维笔记 Navicat中查询指定字段名所在的表名tomcat设置JVM的初始堆内存修改catalina.sh文件修改完保存并关闭tomcat启动tomcat 查询数据库连接数查询是否存在死锁 Navicat中查询指定字段名所在的表名 SELECT * FROM information_schema.COLUMNS WHERE COLUMN_NAME‘替换成你要…