كيفية إنشاء أيقونات تواصل اجتماعية عائمة باستخدام HTML و CSS فقط

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

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

كما ترى في الصورة ، هذه أداة تواصل اجتماعية عائمة أنيقة ، تعتمد فقط على HTML و CSS. هناك بعض أيقونات تواصل الاجتماعية مثل Facebook و Twitter و Instagram و Github و YouTube.

جميع خلفية الأيقونة متدرجة اللون مما يعني أنه تم مزج لونين لإنشاء خلفية. في البداية ، كانت خلفية جميع الرموز مربعة ولكن عندما تحوم فوق رمز معين ، يتم تدوير الخلفية بزاوية 360 درجة وسيكون شكل الخلفية على شكل دائرة. إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل على هذا البرنامج (Awesome Hover Animation on Social Media Icons).

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

إذا كنت تحب أداة تواصل الاجتماعية هذه مع Hover Animation وترغب في الحصول على أكواد المصدر. يمكنك بسهولة الحصول على الأكواد المصدرية لهذا البرنامج. للحصول على أكواد المصدر ، تحتاج فقط إلى التمرير لأسفل.

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