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

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

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

 

ربما تكون قد شاهدت هذا النوع من الرسوم المتحركة لكتابة النص في العديد من مواقع الحافظة أو المواقع الأخرى. بشكل عام ، يتم إنشاء هذه الرسوم المتحركة باستخدام JavaScript أو مكتبة jQuery ، ويتم كتابة مكتبة jQuery الشهيرة للرسوم المتحركة للنصوص.لكن الآن سأخبرك كيف يمكنك إنشاء هذا الرسم المتحرك لكتابة النص باستخدام HTML و CSS فقط.

 

في هذه الرسوم المتحركة للنص ، هناك نوعان من النصوص التي تعني أن أحدهما نص ثابت لا يحتوي على رسوم متحركة ، والثاني به رسوم متحركة ويتغير ديناميكيًا. لقد أضفت أربعة نصوص مختلفة إلى هذه الرسوم المتحركة وتم عرضها واحدًا تلو الآخر مع رسم متحرك للكتابة يبدو رائعًا وممتعًا.

 

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

 

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

 

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

 

نقية CSS Text Typing Animation

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

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow