Анимация eclipse

Урок 9 из 10 курса Анимация солнечного затмения | Проект на HTML/CSS на Coddy.

Задание

Легко

В CSS-файле создайте анимацию, используя @keyframes:

Назовите анимацию "eclipse-animation".
Добавьте три селектора ключевых кадров: 0%, 50% и 100%.
Добавьте CSS-стили в селектор ключевого кадра 0%:
1. Установите box-shadow в значение none.
2. Установите transform в значение translate(-30px, 30px) scale(0.9).
Добавьте CSS-стили в селектор ключевого кадра 50%:
1. Установите transform в значение translate(0px, 0px) scale(1.02).
2. Установите box-shadow в значение 0 0 10px #f9f3f2, 0 0 80px 8px #C7938B.
3. Установите background-color в значение #efdbd8.
Добавьте CSS-стили в селектор ключевого кадра 100%:
1. Установите transform в значение translate(30px, -30px) scale(0.9).
2. Установите box-shadow в значение none.

Если вы не уверены, обратитесь к подсказке. После этого шага вы увидите, как луна движется!

Если она не движется — обратитесь к решению…

Попробуйте сами

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

Все уроки раздела Анимация солнечного затмения | Проект на HTML/CSS

1HTML

Что вы создадите?Настройка кода Контейнер Луны

2CSS

Псевдоэлемент класса moon

Анимация eclipse Урок-проект

Адаптивность