旋转地球功能实现主要借助于CSS动画效果完成,通过移动地图背景图层,云彩图层等,在视觉上呈现出旋转地球效果。旋转地球最终实现效果如下图所示:

旋转地球效果展示
设计思路与核心技术
旋转地球效果实现主要借助于animation动画属性完成,在动画关键之keyframe编写时移动图片坐标位置,实现背景地图图片位置移动。为体现移动效果,进一步定义了云彩与飞机,飞机居中固定,云彩与地球非同步移动,最终呈现出动态效果。本例所需核心技术主要描述如下:
1、flex布局
通过使用flex布局模式用于实现呈现动画效果div在页面居中显示效果,核心代码如下:
display: flex; //flex布局justify-content: center;//水平居中 align-items: center;//垂直居中
2、before与after伪元素
在之前案例设计分析中,我们使用before与after等元素进行了案例设计,这两个元素主要用于在页面中生成虚拟的元素。本例中我们使用before在地球容器层前定义了用于存储云彩的伪元素层。部分代码如下: