Elemen semu pada class moon

Pelajaran 8 dari 10 dalam kursus Animasi Gerhana Matahari | Proyek HTML/CSS di Coddy.

Tantangan

Mudah

Di file CSS, pilih class moon dan gunakan pseudo-element ::before,

Atur content elemen ini menjadi "" (string kosong).
Atur background-color menjadi rgba(0, 0, 0, 0).
Atur border-radius menjadi 50%.
Atur z-index menjadi -1.
Atur width dan height menjadi 100%.
Atur position menjadi absolute dan display menjadi block.
Tambahkan animasi bernama "eclipse-animation", yang berjalan selama 3.2s dalam keadaan linear, infinite, dan alternate .

Coba sendiri

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Tulis kode HTML di sini -->
        <script src="script.js"></script>
    </body>
</html>

Semua pelajaran di Animasi Gerhana Matahari | Proyek HTML/CSS

1HTML

Apa yang akan kamu buat?Penyiapan Kode Wadah Bulan

2CSS

Elemen semu pada class moon Pelajaran proyek

Animasi gerhana

Desain responsif

Latihan sendiri: Playground Web