كيفية إنشاء شريط المهارات المتحركة باستخدام HTML و CSS فقط

ستتعلم اليوم كيفية إنشاء شريط مهارات متحركة باستخدام HTML و CSS فقط

مرحبًا أيها القراء ، سنتعلم اليوم كيفية إنشاء شريط مهارات متحركة باستخدام HTML و CSS فقط.

 

يسمح لك Skill Bar بإظهار معلوماتك أو مهاراتك بشكل أنيق وجذاب في شكل أشرطة النسبة المئوية تمامًا مثل الشريط الأفقي. إنها طريقة سريعة وسهلة وملونة لعرض مهاراتك على زوار موقعك ومشاهدي المحتوى.

 

في هذا البرنامج [Animated Skill Bar] ، على صفحة الويب ، هناك خمسة أشرطة مهارات مع عناوين المهارة ونسب مهاراتهم. تستند أشرطة المهارات هذه فقط إلى HTML و CSS فقط وتحتوي هذه الأشرطة أيضًا على رسوم متحركة ، وهذا يعني أنه عند إعادة تحميل صفحة الويب الخاصة بك ، يتم عرض أشرطة المهارات هذه أفقيًا مع رسوم متحركة رائعة.

 

إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل عن هذا البرنامج [Animated Skill Bar UI Design].

 

في الفيديو ، شاهدت شريط المهارات المتحركة والرسوم المتحركة أيضًا. أتمنى أن تكون قد فهمت الرموز الأساسية وراء إنشاء هذا البرنامج. إذا كنت مبتدئًا في مجال تصميم الويب ، فيمكنك أيضًا إنشاء هذا النوع من أشرطة المهارات أو الأشرطة الأفقية ولكن يجب أن تعرف HTML و CSS الأساسيين. في هذا البرنامج ، يتم استخدام خصائص CSS للرسوم المتحركة و keyframes بشكل أساسي لإنشاء رسوم متحرك على هذه الأشرطة.

 

إذا كنت تحب أشرطة المهارات المتحركة هذه وترغب في الحصول على أكواد المصدر الخاصة بهذا البرنامج. يمكنك بسهولة الحصول على أكواد هذا البرنامج من المربعين أدناه أو يمكنك أيضًا تنزيل ملفات التعليمات البرمجية ويمكنك استخدام هذا البرنامج في مشاريعك ومواقع المحفظة وصفحات HTML.

 

شريط مهارات الرسوم المتحركة تصميم واجهة المستخدم

لإنشاء هذا البرنامج (شريط المهارات المتحركة). أولاً ، تحتاج إلى إنشاء ملفين ، أحدهما ملف HTML والآخر هو ملف CSS. بعد إنشاء هذه الملفات ، قم فقط بلصق الأكواد التالية في ملفك. أولاً ، قم بإنشاء ملف HTML باسم index.html والصق الرموز المحددة في ملف HTML الخاص بك. تذكر أنه يجب عليك إنشاء ملف بامتداد .html.

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow