تحريك أشكال clip-path
أنشئ رسومًا متحركة مؤثرة للكشف عن المحتوى عبر الانتقال بين قيم clip-path polygon
تحريك أشكال clip-path درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
clip-path قابل للتحريك
يمكن لـ CSS إجراء انتقال وتحريك بين قيمتي clip-path ما دامتا تستخدمان دالة الشكل نفسها وبالعدد نفسه من الوسائط. ويجري الاستيفاء نقطةً بنقطة.
تحريك إظهار بالانزلاق
إظهار كلاسيكي باستخدام clip-path — ينزلق المحتوى من اليسار:
<div class="content visible"></div>
إظهار دائري
وسّع دائرة من المركز لإظهار المحتوى:
<div class="overlay open"></div>
تحويل الأشكال
حرّك بين أشكال المضلعات لإنشاء تأثير التحويل. يجب أن يكون لدى كلا المضلعين العدد نفسه من الرؤوس:
<div class="morph-shape"></div>
مطابقة عدد الرؤوس
للتحريك بين شكلين مختلفين من المضلعات (مثلث ومربع مثلًا)، أضف نقاطًا متطابقة إضافية إلى الشكل الأبسط:
<div class="triangle-4pt"></div>
<div class="square-4pt"></div>
تأثير الإظهار عند التمرير
صورة بطاقة تُقص على شكل دائرة عند تمرير المؤشر فوقها:
<div class="card">
<div class="card-img"></div>
</div>
انتقالات المسح
انتقال مسح قطري عند تغيير الصفحات:
<div class="page-enter"></div>
أداء تحريك clip-path
يؤدي تحريك clip-path إلى تشغيل مرحلة الرسم في معظم المتصفحات، بخلاف transform وopacity اللذين يقتصران على التركيب. بالنسبة إلى التحريكات المعقدة على العناصر الكبيرة، اختبر الأداء في DevTools قبل الإطلاق.
clip-path مقابل mask-image للتحريك
بالنسبة إلى الشفافية المتحركة المعقدة، قد يكون استخدام mask-image مع تدرج متحرك أكثر كفاءة من clip-path في عمليات الإظهار الاتجاهية البسيطة.
التمهيد بنمط النابض باستخدام clip-path
ينشئ التمهيد المشابه لحركة النابض عمليات إظهار ذات إحساس طبيعي:
<div class="reveal"></div>
تحقق سريع
ما المطلوب حتى يتمكن CSS من إجراء استيفاء سلس بين قيمتي clip-path من النوع polygon()؟
خلاصة
حرّك بين أشكال clip-path باستخدام الانتقالات أو @keyframes. يلزم استخدام دالة الشكل نفسها وبالعدد نفسه من الرؤوس لإجراء الاستيفاء. استخدم circle() لعمليات الإظهار المتوسعة، وpolygon() للمسح والتحويل، وinset() للانتقالات المستطيلة باستخدام clip. طابق أعداد الرؤوس بإضافة نقاط متطابقة إلى الأشكال الأبسط.
الأسئلة الشائعة
هل درس «تحريك أشكال clip-path» مجاني؟
نعم — نص درس «تحريك أشكال clip-path» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «تحريك أشكال clip-path»؟
أنشئ رسومًا متحركة مؤثرة للكشف عن المحتوى عبر الانتقال بين قيم clip-path polygon تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «تحريك أشكال clip-path»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- clip-path مع polygon() وcircle()
- shape-outside لالتفاف النص
- تحريك أشكال clip-path
- أقنعة CSS مقابل clip-path