地图模块制作:
- 地图模块高度为 810px 里面包含4个盒子 chart 放图表模块 球体盒子 旋转1 旋转2
- 球体图片模块 map1 大小为 518px 要加背景图片 因为要缩放100% 定位到最中央 透明度 .3
- 旋转1 map 2 大小为 643px 要加背景图片 因为要缩放100% 定位到中央 透明度 .6 做旋转动画 利用z-index压住球体
- 旋转2 map3 大小为 566px 要加背景图片 因为要缩放100% 定位到中央 旋转动画 注意是逆时针
- 球体图片模块map1:
<div class="map">
<div class="map1"></div>
</div>
</div>
.map{
position: relative;
height: 10.125rem;
.map1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6.475rem;
height: 6.475rem;
background: url(../images/map.png) no-repeat;
background-size: 100% 100%;
opacity: 0.3;
}
}
结果为:
- 旋转1 map 2
大小为 643px 要加背景图片 因为要缩放100% 定位到中央 透明度 .6 做旋转动画 利用z-index压住球体
<div class="map">
<div class="map1"></div>
<div class="map2"></div>
</div>
.map2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8.0375rem;
height: 8.0375rem;
background-image: url(../images/lbx.png);
opacity: 0.6;
z-index: 2;
}
结果:
它要做旋转,而且是不停的旋转,这时要用到我们的动画了。
.map2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8.0375rem;
height: 8.0375rem;
background-image: url(../images/lbx.png);
opacity: 0.6;
animation: rotate1 15s linear infinite;
//linear匀速 infinite 无限循环
z-index: 2;
}
@keyframes rotate1 {
from{
transform:translate(-50%,-50%) rotate(0deg);
}
to {
transform:translate(-50%,-50%) rotate(360deg);
}
}
}
注意:在旋转的时候要保持位置值,所以这个transform:translate(-50%,-50%)一定不能落下。
结果为:
- 旋转2 map3
大小为 566px 要加背景图片 因为要缩放100% 定位到中央 旋转动画 注意是逆时针
<div class="map">
<div class="map1"></div>
<div class="map2"></div>
<div class="map3"></div>
</div>
.map3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 7.075rem;
height: 7.075rem;
background-image: url(../images/jt.png);
animation: rotate2 10s linear infinite;
}
@keyframes rotate2 {
from{
transform:translate(-50%,-50%) rotate(0deg);
}
to {
transform:translate(-50%,-50%) rotate(-360deg);
}
}
注意:这个逆时针只需要修改从0到-360度就行。
地图模块暂时先放着,和最后图表一起做。
<div class="map">
<div class="map1"></div>
<div class="map2"></div>
<div class="map3"></div>
<div class="chart"></div>
</div>
.chart{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 10.125rem;
}
以上才算真正意义上的布局结束了,下面就开始EChart了。