This is a modal window.
Beginning of dialog window. Escape will cancel and close the window.
End of dialog window.
This is a modal window. This modal can be closed by pressing the Escape key or activating the close button.
الفئات: التكنولوجيا والتطوير
كل ما تحتاج لمعرفته حول الرسوم المتحركة باستخدام CSS ، وما هي وظائف وخصائص الرسوم المتحركة بCSS وكيف نستخدم CSS لإنشاء رسوم متحركة متنوعة من شأنها رفع مستوى موقع الويب الخاص بك.
ما هي الCSS Keyframes وما هي وظائف وخصائص CSS Keyframes وكيف يمكن استخدامها لخلق تجربة مستخدم مختلفة على موقع الويب الخاص بك.
ما هي خاصية CSS Clip Path ، وما هي الوظائف الرئيسية لها وكيف يمكننا استخدامها لإنشاء أشكال وتقنيات مختلفة باستخدام CSS Animations.
دروس مجانية
مقدمة عن الرسوم المتحركة
إنشاء رسوم متحركة CSS بمزيد من المراحل
الخاصية Animation Fill Mode في CSS
الخاصية Animation Iteration Count
الخاصية Animation Direction
1. الرسوم المتحركة والإطارات الرئيسية CSS
مقدمة عن الرسوم المتحركة
إنشاء رسوم متحركة CSS بمزيد من المراحل
الخاصية Animation Fill Mode في CSS
الخاصية Animation Iteration Count
الخاصية Animation Direction
طريقة اختزال الرسوم المتحركة
2. أمثلة إبداعية للرسوم المتحركة في CSS
نماذج إبداعية Animation CSS
نص عائم باستخدام Animation CSS
تأثير التحميل بالتناوب باستخدام Animation CSS
تصميم قيادة السيارة والدراجة النارية باستخدام Animation CSS
نص دوار باستخدام Animation CSS
تصميم خلفية متحركة باترن باستخدام CSS animation
تصميم زر بـتأثير اهتزاز باستخدام CSS Animation
تصميم زر متحرك باستخدام CSS Animation
تصميم نص مضيء باستخدام CSS Animations
تأثير قلب نابض باستخدام CSS Animations
تصميم نص متحرك في الخلفية باستخدام CSS Animations
تصميم كرات مرتدة باستخدام CSS Animations
تصميم مطر باستخدام CSS Animations
تصميم أيقونة متأرجحة باستخدام CSS Animations
تأثير النص Loading المتحرك
تأثير نبضي باستخدام CSS Animations
معرض الصور شرائح متحرك باستخدام CSS animations
تصميم شاشة متغيرة لون خلفية CSS Animations
تأثير مهد نيوتن مع الرسوم CSS Animations
تأثير التحميل الملون الجميل مع CSS Animations
تأثير المربعات المتحركة مع CSS Animations
تأثير النص المتحرك مع CSS Animations
تصميم حلقة بحركة التدوير باستخدام CSS Animations
تصميم خط بتأثير التحميل باستخدام الرسوم المتحركة CSS
خطوط متزايدة بحركة التحميل باستخدام CSS Animations
حلقات تحميل التناوب باستخدام CSS Animations
تأثير المربع المتلاشي باستخدام CSS animations
تأثير الخط المتزايد باستخدام CSS Animation
تأثير الخلفية المتحركة بالمربعات باستخدام CSS animations
شكل سداسي بتأثير التحميل
باستخدام CSS Animations تأثير Expanding Line Menu
تصميم خلفية بمربعات متحركة في الخلفية باستخدام CSS Animations
3. خاصية CSS Clip Path وأمثلة لها
أمثلة CSS Clip Path
ما هي خاصية CSS Clip Path وكيف يمكننا استخدامها لإنشاء الأشكال
تأثير Creative Split Loading باستخدام خاصية CSS Clip Path
تأثير Creative CSS Wavy باستخدام خاصية CSS Clip Path
تأثير Creative Image Hover باستخدام خاصية CSS Clip Path
تأثير Creative CSS Pop Up باستخدام خاصية CSS Clip Path
تأثير النص من الأسود إلى الأبيض والأبيض إلى الأسود باستخدام خاصية CSS Clip Path
صورة إلى دائرة تأثير التمرير باستخدام خاصية CSS Clip Path
تأثير Creative Image Hover باستخدام خاصية CSS Clip Path
تأثير Menu Split باستخدام خاصية Clip Path CSS
تأثير Button Hover باستخدام خاصية Clip Path CSS
الرسوم المتحركة يمكنها ان توجه زوار موقعك إلى عنصر مهم في الصفحة ، حيث تعتبر أداه قوية لإشراك وتفديم تجربة مميزة للزائرين على موقعك. حتى انه بامكانها جعل تجربة التحميل أكثر تسلية لجمهورك. سهل استخدام الCSS Animations على المطورين في تحريك أي عنصر على صفحة الويب بطرق إبداعية و مختلفة. ستكون هذه الدورة التدريبية بمثابة نقطة البداية لتعلم كل شيء عن الرسوم المتحركة والإطارات الرئيسية باستخدام لغة CSS.
تتطلب هذه الدورة التدريبية معرفة مسبقة بـلغة CSS و HTML.
مطوّر ويب خبير
951 متعلمين
5 دورات