优秀的编程知识分享平台

网站首页 > 技术文章 正文

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

nanyue 2025-05-26 17:52:47 技术文章 15 ℃

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

设计思路与核心技术

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

1、flex布局

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

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

2、before与after伪元素

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

.earth:before{ 
content: ''; 
width: 100%; //宽度
height: 100%; //高度
position: absolute; //绝对定位
background: url('cloud.png');//背景图片 
background-size: cover; //图片放缩类型
opacity: 0.8; //透明度
border-radius: 50%; //圆角
animation:animate 18s linear infinite;//动画
 }

3、animation与keyframes

animation属性与keyframes是实现CSS动画的关键，本例中需要将地球图片与云彩图片分别进行动画定义，最终呈现动画效果，其中云彩动画定义如下：

animation:animate 18s linear infinite;//动画定义
 @keyframes animate{ //关键帧定义
0%{ background-position: 0 0; } 
100%{ background-position:807px 0; }
 }

效果实现与核心代码

在明确本例设计思路与掌握所需技能基础上，我们可以搜集素材完成本案例效果的制作与实现。

1、所需素材

主要所需素材包括地图平面图片，飞机图标，云彩图片等。素材如下图所示：

2、页面布局

本例页面布局较为简单，只需要一个div用于存储地图图片资源，before元素用于存储云朵，飞机素材可用img标记元素存储。页面body部分布局代码如下：

<body> 
<div class="earth">
 <img src="plane.png">
 </div> 
</body>

3、CSS样式编辑

CSS样式编辑是本例核心，包括页面布局的实现，伪元素的定义及动画效果设计实现等，其中earth类、earth:before类与动画设计时关键部分，核心代码如下：

以上给出旋转地球设计效果实现思路及核心相关技术，如需代码分享，请评论区留言、关注并私信。本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可在评论区回复。更多程序设计相关教程及实例分享，期待大家关注与阅读！

Tags：

猜你喜欢

最近发表
标签列表