كيفية تصميم بطاقة الملف الشخصي باستخدام HTML CSS و JavaScript

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

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

ما هي البطاقة بالضبط؟ حسنًا ، تأتي في جميع أنواع الأشكال والأحجام ، لكن البطاقات الشائعة ستتضمن معلومات أو محتوى مثل العنوان واسم المستخدم والصورة والأيقونات المختلفة. في بعض الأحيان قد يكون هناك نص قصير ، على سبيل المثال ، وصف المنتج أو العميل.

اليوم في هذا الفيديو ، سأشارك معك هذا البرنامج (Profile Card UI Design with Hover Animation). في البداية ، على صفحة الويب ، لا يوجد سوى صورة ذات لون حد دائري. ولكن عندما تحوم فوق تلك البطاقة ، فإن ارتفاع وعرض البطاقة يتسعان بسلاسة ويظهران محتويات البطاقة. لقد أضفت أيضًا تأخير انتقال على أزرار الوسائط الاجتماعية بحيث تظهر الأزرار واحدة تلو الأخرى.

إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل على هذا البرنامج (Profile Card UI Design with Hover Animation).

كما شاهدت الرسوم المتحركة الحقيقية للبطاقة في الفيديو كما شاهدت عندما نضغط على الصورة ، تتحول الصورة إلى ملء الشاشة. هناك استخدمت JavaScript لإنشاء تلك الصورة القابلة للنقر وتحويلها إلى ملء الشاشة.

إذا كنت مبتدئًا وتعرف HTML و CSS ، فيمكنك أيضًا إنشاء هذا النوع من البطاقات وإضافة الرسوم المتحركة والتأثير الإبداعي. إذا كنت تحب هذا البرنامج (Profile Card UI Design with Hover Animation) وترغب في الحصول على أكواد المصدر. يمكنك بسهولة الحصول على الأكواد المصدرية لهذا البرنامج. للحصول على أكواد المصدر ، تحتاج فقط إلى التمرير لأسفل.

تصميم واجهة مستخدم بطاقة الملف الشخصي المتحركة
لإنشاء هذا البرنامج (Profile Card UI Design with Hover Animation). أولاً ، تحتاج إلى تحميل ملف الاكواد من زر التحميل

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow