eclipse animasyonu

Coddy'nin Güneş Tutulması Animasyonu | HTML/CSS Projesi kursunda ders 9 / 10.

Görev

Kolay

CSS dosyasında, @keyframes kullanarak bir animasyon oluşturun:

Animasyonu "eclipse-animation" olarak adlandırın.
0% , 50% ve 100% olmak üzere üç adet keyframes-selector ekleyin.
0% keyframes-selector içine css stillerini ekleyin:
1. box-shadow değerini none olarak ayarlayın.
2. transform değerini translate(-30px, 30px) scale(0.9) olarak ayarlayın.
50% keyframes-selector içine css stillerini ekleyin:
1. transform değerini translate(0px, 0px) scale(1.02) olarak ayarlayın.
2. box-shadow değerini 0 0 10px #f9f3f2, 0 0 80px 8px #C7938B olarak ayarlayın.
3. background-color değerini #efdbd8 olarak ayarlayın.
100% keyframes-selector içine css stillerini ekleyin:
1. transform değerini translate(30px, -30px) scale(0.9) olarak ayarlayın.
2. box-shadow değerini none olarak ayarlayın.

Emin değilseniz ipucuna bakın. Bu adımdan sonra ayın hareket ettiğini göreceksiniz!

Eğer hareket etmiyorsa - çözüme bakın...

Kendin dene

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

Güneş Tutulması Animasyonu | HTML/CSS Projesi bölümündeki tüm dersler

1HTML

Ne yapacaksınız?Kod Kurulumu Ay Kapsayıcısı

2CSS

moon sınıfı pseudo-element

eclipse animasyonu Proje dersi

responsiveness