background 旋转_如何使用CSS实现旋转地球动画效果

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

旋转地球效果展示

---

设计思路与核心技术

旋转地球效果实现主要借助于animation动画属性完成，在动画关键之keyframe编写时移动图片坐标位置，实现背景地图图片位置移动。为体现移动效果，进一步定义了云彩与飞机，飞机居中固定，云彩与地球非同步移动，最终呈现出动态效果。本例所需核心技术主要描述如下：

1、flex布局

通过使用flex布局模式用于实现呈现动画效果div在页面居中显示效果，核心代码如下：

display: flex; //flex布局justify-content: center;//水平居中 align-items: center;//垂直居中

2、before与after伪元素

在之前案例设计分析中，我们使用before与after等元素进行了案例设计，这两个元素主要用于在页面中生成虚拟的元素。本例中我们使用before在地球容器层前定义了用于存储云彩的伪元素层。部分代码如下：