使用CSS创建地球轨道动画

CSSCSSBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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

👀 预览

地球绕太阳公转动画

🎯 任务

在这个项目中,你将学习:

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

🏆 成果

完成这个项目后,你将能够:

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/DynamicStylingGroup(["`Dynamic Styling`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicConceptsGroup -.-> css/properties("`Properties`") css/CoreLayoutGroup -.-> css/box_model("`Box Model`") css/DynamicStylingGroup -.-> css/animations("`Animations`") css/DynamicStylingGroup -.-> css/transitions("`Transitions`") subgraph Lab Skills css/selectors -.-> lab-300055{{"`使用CSS创建地球轨道动画`"}} css/properties -.-> lab-300055{{"`使用CSS创建地球轨道动画`"}} css/box_model -.-> lab-300055{{"`使用CSS创建地球轨道动画`"}} css/animations -.-> lab-300055{{"`使用CSS创建地球轨道动画`"}} css/transitions -.-> lab-300055{{"`使用CSS创建地球轨道动画`"}} end

设置项目结构

首先,打开实验环境,其目录结构如下:

├── 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 元素围绕屏幕中心旋转,模拟地球绕太阳的轨道。

  1. 保存 style.css 文件。
  2. 返回浏览器并刷新页面。你应该会看到以下效果:
完成后的效果
✨ 查看解决方案并练习

总结

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

您可能感兴趣的其他 CSS 教程