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

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

球体模块制作

1.球体模块布局

HTML

      

        

          

            

              
125811
              
104563
            
          
          

            

              
前端需求人数
              
市场供应人数
            
          
        
        

          

        
      

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

 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

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 就跟原型一样了。