كيفية تصميم الرسوم المتحركة باستخدام HTML & CSS

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

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

كما رأيت في العديد من مواقع الويب ، عند النقر فوق حقل الإدخال لإدخال بعض المعلومات ، هناك رسوم متحركة رائعة للتسمية العائمة. التسمية العائمة هي تسمية نصية تظهر داخل حقل الإدخال بحجم الخط الكامل. عند التفاعل معها ، فإن التسمية "تطفو" أعلاه ، مما يوفر مساحة أو مساحة للمستخدم لإدخال القيمة أو تفاصيل تسجيل الدخول.

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

إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل على هذا البرنامج (Floating Label Animation أو Input Animation).

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

الرسوم المتحركة للتسمية العائمة أو إدخال الرسوم المتحركة
لإنشاء هذا البرنامج (Floating Label Animation أو Input Animation). أولاً ، تحتاج إلى تحميل ملف الاكواد من زر التحميل

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow