كيفية عمل نص وامض / وامض باستخدام CSS

'لتحديد عنوان بين عنصر div:

---

---

< شعبة صف دراسي = 'نمط وميض' >
< h3 > لينكس h3 >
شعبة >

دعنا ننتقل إلى تصميم عناصر HTML.

أسلوب 'blink-style' div

. blink-style {
الخلفية: RGB ( 0 و 0 و 0 ) ؛
}

CSS ' معرفتي 'يتم تطبيق الخاصية على عنصر div مع الفئة' على غرار وميض '.

عنصر نمط 'h3'

h3 {
محاذاة النص: مركز ؛
عائلة الخطوط: Verdana؛
اللون: # ffc310 ؛
الرسوم المتحركة: نص وميض 1.9 ثانية خطي لانهائي ؛
حجم الخط: 6em ؛
}

HTML '

عنصر 'مزين بخصائص CSS التالية:

• ' محاذاة النص 'تحدد محاذاة نص العنصر.
• ' خط العائلة 'نمط الخط للنص.
• ' اللون 'لتلوين نص العنصر.
• ' حيوية 'هي خاصية الاختصار التي تحدد اسم الحركة ومدة الرسوم المتحركة ووظيفة توقيت الرسوم المتحركة وقيم خاصية عدد الرسوم المتحركة التكرار.
• ' حجم الخط 'تضبط الخاصية حجم الخط بشكل أساسي بوحدات' px 'و' em '.

تطبيق “keyframe rule” على الرسوم المتحركة “blink-text”

@ وميض النص الإطارات الرئيسية {
0 ٪ {
العتامة: 0 ؛
}
خمسون ٪ {
العتامة: واحد ؛
}
100 ٪ {
العتامة: 0 ؛
}

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

• في ' 0٪ '، يتم تعيين تعتيم النص على 0.
• في ' خمسون٪ '، يتم تعيين تعتيم النص على 1.
• في ' 100٪ '، يتم تعيين تعتيم النص على 0.

انتاج |

مثال 2: عمل نص متعدد الوامض

لإنشاء نصوص وامضة متعددة في HTML ، اتبع الخطوات الموضحة أدناه:

• أولاً ، ضع '
  'وتخصيص فئة له' نص شعبة '.
• ثم أضف '

  'لتضمين بعض النصوص.

• العنصر '

  ' الأول يتم تعيين فئة ' وامض '.

• والثاني يتم تخصيص فئتين ، ' وامض ' و ' واحد '. يتم الوصول إلى كلا الفئتين في CSS للإعلان عن خصائص التصميم:

< شعبة صف دراسي = 'نص- div' >
< ص صف دراسي = وميض > توينكل توينكل ص >
< ص صف دراسي = وميض واحد > نجمة صغيرة * ص >
شعبة >

الآن ، راجع قسم CSS لتصميم HTML '

' عناصر.

نمط 'text-div' div

.text-div {
العرض: 400 بكسل ؛
الهامش: سيارة
لون الخلفية: RGB ( 42 و 49 و 49 ) ؛
الحشو: 8 بكسل ؛
}

ال ' .text-div 'للوصول إلى عنصر

. ضمن الأقواس المتعرجة ، يتم تطبيق خصائص CSS التالية على '.text-div':

• ' العرض 'تضبط عرض العنصر.
• ' حافة 'مساحة حول العنصر.
• ' لون الخلفية 'يضبط لون الخلفية.
• ' حشوة 'مساحة داخل حدود العنصر.

فئة أسلوب 'وامض'

.flashing {
اللون الأصفر؛
حجم الخط: 40 بكسل ؛
عائلة الخطوط: مخطوطة ؛
وزن الخط: عريض ؛
الرسوم المتحركة: على غرار وامض 0.6 ثانية خطي لانهائي ؛
}

ال ' .flashing 'للوصول إلى علامات HTML

. يتم تنفيذ الخصائص التالية في هذه الفئة:

• ' وزن الخط 'يشير إلى سمك الخط.
• يتم شرح الخصائص الأخرى في القسم أعلاه.

تطبيق 'keyframe rule' على الرسوم المتحركة 'ذات النمط الوامض'

@ وميض الإطارات الرئيسية {
0 ٪ {
العتامة: 0 ؛
}
}

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

لجعل الرسوم المتحركة في الثانية “

'العنصر مختلفًا قليلاً ، والفئة' واحد 'مع أنماط الرسوم المتحركة التالية:

فئة نمط 'واحد'

.واحد {
الرسوم المتحركة: 1 ثانية خطي لانهائي ؛
}
@ keyframes واحد {
خمسون ٪ {
العتامة: 0 ؛
}
}

انتاج |

لقد تعلمنا بشكل فعال كيفية عمل النص الوامض باستخدام خصائص تصميم CSS مختلفة.

استنتاج

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