Создание анимации орбиты Земли с использованием CSS

Введение

В этом проекте вы научитесь создавать CSS-анимацию, которая имитирует орбиту Земли вокруг Солнца. Этот проект поможет вам понять концепции CSS-анимаций и научиться применять их для создания динамического и визуально привлекательного веб-опыта.

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

• Настраивать анимацию для элемента .earth-con
• Использовать @keyframes для анимации orbit для создания вращения Земли вокруг центра

🏆 Достижения

После завершения этого проекта вы сможете:

• Создавать CSS-анимацию, которая имитирует орбиту Земли вокруг Солнца
• Понять концепции CSS-анимаций и научиться применять их для создания динамического и визуально привлекательного веб-опыта
• Координировать несколько CSS-свойств для достижения желаемого анимационного эффекта

Настройка структуры проекта

Для начала откройте экспериментальную среду. Структура каталогов будет выглядеть следующим образом:

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

Где:

• index.html - это главная страница.
• css/style.css - это CSS-файл, в который вам нужно добавить код.

Нажмите кнопку Go Live в правом нижнем углу WebIDE, чтобы запустить проект.

Затем откройте "Web 8080" в верхней части виртуальной машины и вручную обновите страницу, чтобы увидеть следующий эффект в браузере:

Настройка анимации

На этом шаге вы научитесь добавлять анимацию к элементу .earth-con в файле css/style.css.

1. Откройте файл css/style.css в редакторе кода, прокрутите код до конца, и вы увидите, что orbit - это уже заданное правило @keyframes, и это правило @keyframes определяет последовательность анимации.

2. Найдите класс .earth-con в CSS-файле.

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, чтобы улучшить свои навыки.