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);
    }
  }

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