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

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

Задание

Легко

В CSS-файле выберите класс moon и используйте псевдоэлемент ::before,

Установите свойство content этого элемента в "" (пустая строка).
Установите background-color в rgba(0, 0, 0, 0).
Установите border-radius в 50%.
Установите z-index в -1.
Установите width и height в 100%.
Установите position в absolute и display в block.
Добавьте анимацию с именем "eclipse-animation", которая будет выполняться каждые 3.2s в состояниях linear, infinite и alternate .

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

<!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

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