地图相关（一）

PS相关学习资料链接：Pink老师的教程，O(∩_∩)O哈哈~
图片来源：https://pan.baidu.com/s/1DGRic_SQ9X0Oqbaty_nwfg ，提取码：kowl

总的实现效果：

分解：

• a. 一个蓝色的圆球
• b. 与蓝色圆球大小差不多的浅蓝色线，逆时针旋转
• c. 网格顺时针旋转
• d. 地图（本节先不实现地图）
  
  背景图

a图：

b图：

c图：

HTML：

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

CSS：（less的写法）

.map{
    position:relative;
    height: 9.5rem;
    .map1{
        width: 6.475rem;
        height: 6.475rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: url(../images/map.png);
        background-size: 100% 100%;
        opacity: 0.3;
    }
    .map2 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8.0375rem;
        height: 8.0375rem;
        background: url(../images/lbx.png);
        animation: rotate1 15s linear infinite;
        opacity: 0.6;
        background-size: 100% 100%;
    }
    .map3 {
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    width: 7.075rem;
	    height: 7.075rem;
	    background: url(../images/jt.png);
	    animation: rotate2 10s linear infinite;
	    opacity: 0.6;
	    background-size: 100% 100%;
	}
    //   动画1：顺时针旋转360度
    @keyframes rotate1 {
        form {
          transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
          transform: translate(-50%, -50%) rotate(360deg);
        }
    }
    //   动画2：逆时针旋转360度
    @keyframes rotate2 {
        form {
          transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
          transform: translate(-50%, -50%) rotate(-360deg);
        }
    }
    .chart{
        position: absolute;
        top: 0;
        left: 0;
        // background-color: pink;
        width: 100%;
        height: 9.5rem;
    }
}

最终实现效果：

---

echarts学习完整效果图：

代码地址：https://github.com/windcat121/echarts-test