地球漫游

介绍

“地球漫游”：一款基于 CSS 动画的小型网页应用，让您身临其境地感受地球绕着太阳公转的奇妙旅程。通过这个应用，您可以观察地球绕着太阳的运动轨迹和速度，感受到宇宙的浩瀚和神秘。

准备

本题已经内置了初始代码，打开实验环境，目录结构如下：

1
2
3
├── css
│   └── style.css
└── index.html

其中:

  • index.html 是主页面。
  • css/style.css 是需要补充代码的 css 文件。

注意：打开环境后发现缺少项目代码，请复制下述命令至命令行进行下载。

1
2
cd /home/project
file="earth" && wget "https://labfile.oss.aliyuncs.com/courses/19791/${file}.zip" && unzip "${file}.zip" && rm "${file}.zip"

选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。

接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：：

初始效果

目标

找到 css/style.csss 文件中的 TODO 部分，完成以下目标：

给 .earth-con 元素添加动画，设置如下:

  • 动画名称: orbit
  • 动画时间: 36.5 秒
  • 速度函数:线性
  • 播放方式:无限循环

完成后，效果如下：

完成效果

规定

  • 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成判题无法通过。
  • 满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。

判分标准

  • 本题完全实现题目目标得满分，否则得 0 分。

总通过次数: 1222 | 总提交次数: 1227 | 通过率: 99.6%

难度: 简单 标签: 2023, 省模拟赛, Web 前端, CSS3

题解

1
2
3
4
animation-name: orbit;
animation-duration: 36.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;