العنصر الزائف لفئة moon

الدرس 8 من 10 في دورة رسوم متحركة لكسوف الشمس | مشروع HTML/CSS على Coddy.

التحدي

سهل

في ملف CSS، استهدف الفئة moon واستخدم العنصر الزائف ::before،

اضبط المحتوى (content) لهذا العنصر على "" (سلسلة فارغة).
اضبط لون الخلفية (background-color) على rgba(0, 0, 0, 0).
اضبط نصف قطر الحدود (border-radius) على 50%.
اضبط z-index على -1.
اضبط العرض (width) والارتفاع (height) على 100%.
اضبط الموضع (position) على absolute واضبط العرض (display) على block.
أضف حركة (animation) باسم "eclipse-animation"، والتي ستعمل كل 3.2s بحالة linear و infinite و alternate .

جرّب بنفسك

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

جميع دروس رسوم متحركة لكسوف الشمس | مشروع HTML/CSS

1HTML

ماذا ستصنع؟إعداد الكود حاوية القمر

2CSS

العنصر الزائف لفئة moon درس مشروع

أنيميشن الكسوف

التجاوب