moon-Klasse Pseudoelement

Lektion 8 von 10 im Kurs Sonnenfinsternis-Animation | HTML/CSS Projekt von Coddy.

Aufgabe

Einfach

Ziele in der CSS-Datei auf die Klasse moon ab und verwende das Pseudo-Element ::before,

Setze den Inhalt (content) dieses Elements auf "" (leerer String).
Setze die Hintergrundfarbe (background-color) auf rgba(0, 0, 0, 0).
Setze den Rahmenradius (border-radius) auf 50%.
Setze den z-index auf -1.
Setze die Breite (width) und Höhe (height) auf 100%.
Setze die Position (position) auf absolute und die Anzeige (display) auf block.
Füge eine Animation mit dem Namen "eclipse-animation" hinzu, die alle 3.2s in den Zuständen linear, infinite und alternate abläuft.

Probier es selbst

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

Alle Lektionen in Sonnenfinsternis-Animation | HTML/CSS Projekt

1HTML

Was wirst du erstellen?Code-Setup Der Mond-Container

2CSS

moon-Klasse Pseudoelement Projekt-Lektion

eclipse-Animation

Responsivität