moon class pseudo-element

Lesson 8 of 10 in Coddy's Solar Eclipse Animation | HTML/CSS Project course.

Challenge

Easy

In the CSS file, target the moon class and use ::before pseudo-element,

Set the content of this element to "" (Empty string).
Set the background-color to rgba(0, 0, 0, 0).
Set the border-radius of 50%.
Set the z-index of -1.
Set the width and height to 100%.
Set the position to absolute and set display to block.
Add animation named "eclipse-animation", which will run over every 3.2s in linear , infinite and alternate state.

Try it yourself

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

All lessons in Solar Eclipse Animation | HTML/CSS Project

1HTML

What are you going to make?Code Setup The Moon Container

2CSS

moon class pseudo-element Project lesson

eclipse animation

responsiveness