פסאודו-אלמנט של מחלקת moon

שיעור 8 מתוך 10 בקורס אנימציית ליקוי חמה | פרויקט HTML/CSS של Coddy.

אתגר

קל

בקובץ CSS, בחר את המחלקה moon והשתמש בפסאודו־אלמנט ::before,

הגדר את התוכן של האלמנט הזה ל־"" (מחרוזת ריקה).
הגדר את background-color ל־rgba(0, 0, 0, 0).
הגדר את border-radius ל־50%.
הגדר את z-index ל־-1.
הגדר את הרוחב והגובה ל־100%.
הגדר את position ל־absolute ואת display ל־block.
הוסף אנימציה בשם "eclipse-animation", שתפעל במשך 3.2s בכל פעם, במצב linear, infinite ו־alternate .

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- כתבו כאן קוד HTML -->
        <script src="script.js"></script>
    </body>
</html>