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

继续跟着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);}}