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

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

التحدي

سهل

في ملف CSS، قم بإنشاء حركة (animation) باستخدام @keyframes:

قم بتسمية الحركة "eclipse-animation".
أضف ثلاثة محددات للإطارات الرئيسية (keyframes-selectors) وهي 0% و 50% و 100%.
أضف أنماط CSS في محدد الإطارات الرئيسية 0%:
1. قم بتعيين box-shadow إلى none.
2. قم بتعيين transform إلى translate(-30px, 30px) scale(0.9).
أضف أنماط CSS في محدد الإطارات الرئيسية 50%:
1. قم بتعيين transform إلى translate(0px, 0px) scale(1.02).
2. قم بتعيين box-shadow إلى 0 0 10px #f9f3f2, 0 0 80px 8px #C7938B.
3. قم بتعيين background-color إلى #efdbd8.
أضف أنماط CSS في محدد الإطارات الرئيسية 100%:
1. قم بتعيين transform إلى translate(30px, -30px) scale(0.9).
2. قم بتعيين box-shadow إلى none.

إذا لم تكن متأكداً، فارجع إلى التلميح (hint). بعد هذه الخطوة سترى القمر يتحرك!

إذا لم يكن يتحرك - فارجع إلى الحل...

جرّب بنفسك

<!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

أنيميشن الكسوف درس مشروع

التجاوب