moon sınıfı pseudo-element

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

Görev

Kolay

CSS dosyasında, moon sınıfını hedefleyin ve ::before sözde öğesini kullanın,

Bu öğenin içeriğini (content) "" (Boş dize) olarak ayarlayın.
Arka plan rengini (background-color) rgba(0, 0, 0, 0) olarak ayarlayın.
Kenarlık yarıçapını (border-radius) 50% olarak ayarlayın.
z-index değerini -1 olarak ayarlayın.
Genişlik (width) ve yüksekliği (height) 100% olarak ayarlayın.
Konumu (position) absolute ve görünümü (display) block olarak ayarlayın.
"eclipse-animation" adında, her 3.2s sürede bir linear, infinite ve alternate durumunda çalışacak bir animasyon ekleyin.

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 Proje dersi

eclipse animasyonu

responsiveness