使用 CSS 创建地球轨道动画

介绍

在这个项目中，你将学习如何创建一个 CSS 动画，模拟地球绕太阳的轨道。这个项目将帮助你理解 CSS 动画的概念，以及如何应用它们来创建一个动态的、视觉上引人入胜的网页体验。

👀 预览

🎯 任务

在这个项目中，你将学习：

• 如何为 .earth-con 元素设置动画
• 如何使用 @keyframes 来创建 orbit 动画，使地球围绕中心旋转

🏆 成果

完成这个项目后，你将能够：

• 创建一个模拟地球绕太阳轨道的 CSS 动画
• 理解 CSS 动画的概念，以及如何应用它们来创建动态的、视觉上引人入胜的网页体验
• 协调多个 CSS 属性以实现所需的动画效果

设置项目结构

首先，打开实验环境，其目录结构如下：

├── css
│   └── style.css
└── index.html

其中：

• index.html 是主页。
• css/style.css 是需要添加代码的 CSS 文件。

点击 WebIDE 右下角的 Go Live 按钮来运行项目。

接下来，打开虚拟机顶部的“Web 8080”，并手动刷新页面，即可在浏览器中看到以下效果：

设置动画

在这一步中，你将学习如何在 css/style.css 文件中为 .earth-con 元素添加动画。

1. 在代码编辑器中打开 css/style.css 文件，滚动到代码底部，你会看到 orbit 是已经给出的 @keyframes 规则，这个 @keyframes 规则定义了动画序列。

2. 在 CSS 文件中找到 .earth-con 类。

3. 在 .earth-con 类中，添加以下 CSS 属性来定义动画：

   animation: orbit 36.5s linear infinite;
   

   • animation-name: orbit
   • animation-duration: 36.5s
   • animation-timing-function: linear
   • animation-iteration-count: infinite

这将使 .earth-con 元素围绕屏幕中心旋转，模拟地球绕太阳的轨道。

4. 保存 style.css 文件。
5. 返回浏览器并刷新页面。你应该会看到以下效果：

总结

恭喜你！你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。