Animasi gerhana

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

Tantangan

Mudah

Di file CSS, buat animasi menggunakan @keyframes:

Beri nama animasi "eclipse-animation".
Tambahkan tiga selector keyframe, yaitu 0% , 50% dan 100%.
Tambahkan gaya CSS pada selector keyframe 0%:
1. Atur box-shadow ke none.
2. Atur transform ke translate(-30px, 30px) scale(0.9).
Tambahkan gaya CSS pada selector keyframe 50%:
1. Atur transform ke translate(0px, 0px) scale(1.02).
2. Atur box-shadow ke 0 0 10px #f9f3f2, 0 0 80px 8px #C7938B.
3. Atur background-color ke #efdbd8.
Tambahkan gaya CSS pada selector keyframe 100%:
1. Atur transform ke translate(30px, -30px) scale(0.9).
2. Atur box-shadow ke none.

Jika kamu tidak yakin, lihat petunjuknya. Setelah langkah ini, kamu akan melihat bulan bergerak!

Jika bulan tidak bergerak, lihat solusinya…

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

Animasi gerhana Pelajaran proyek

Desain responsif

Latihan sendiri: Playground Web