سی ایس ایس کے ساتھ ٹمٹمانے/چمکتے ہوئے متن کو کیسے بنایا جائے۔

div عنصر کے درمیان ایک سرخی کی وضاحت کرنے کے لیے عنصر:

---

---

< div کلاس = 'پلک جھپکنے کا انداز' >
< h3 > لینکس h3 >
div >

آئیے HTML عناصر کو اسٹائل کرنے کے لیے آگے بڑھیں۔

انداز 'پلک جھپکنے کا انداز' div

.blink-style {
پس منظر: rgb ( 0 ، 0 ، 0 ) ;
}

سی ایس ایس ' پس منظر ' پراپرٹی کا اطلاق div عنصر پر کلاس کے ساتھ ہوتا ہے ' پلک جھپکنے کا انداز '

انداز 'h3' عنصر

h3 {
متن سیدھ: مرکز؛
فونٹ فیملی: وردانا؛
رنگ: #ffc310؛
اینیمیشن: پلک جھپکنے والا متن 1.9s لکیری لامحدود؛
فونٹ سائز: 6em؛
}

ایچ ٹی ایم ایل '

' عنصر کو درج ذیل سی ایس ایس خصوصیات سے سجایا گیا ہے:

• ' متن سیدھ ' پراپرٹی عنصر کے متن کی سیدھ سیٹ کرتی ہے۔
• ' فونٹ فیملی ' متن کے لیے فونٹ کی طرز کی وضاحت کرتا ہے۔
• ' رنگ ' عنصر کے متن کو رنگنے کے لیے استعمال کیا جاتا ہے۔
• ' حرکت پذیری شارٹ ہینڈ پراپرٹی ہے جو اینیمیشن کا نام، اینیمیشن کا دورانیہ، اینیمیشن-ٹائمنگ فنکشن، اور اینیمیشن-ٹریشن-کاؤنٹ پراپرٹی ویلیوز بتاتی ہے۔
• ' حرف کا سائز ' پراپرٹی بنیادی طور پر 'px' اور 'em' یونٹس میں فونٹ کے سائز کو ایڈجسٹ کرتی ہے۔

'blink-text' اینیمیشن پر '@keyframe اصول' کا اطلاق کریں۔

@ کلیدی فریم جھپکتے ہوئے متن {
0 % {
دھندلاپن: 0 ;
}
پچاس % {
دھندلاپن: ایک ;
}
100 % {
دھندلاپن: 0 ;
}

حرکت پذیری کا نام ' جھپکنے والا متن حرکت پذیری کی خاصیت میں بیان کیا گیا ہے۔ ' @keyframe ” قاعدہ حرکت پذیری کے نام سے پہلے شامل کیا جاتا ہے جو مختلف وقفوں پر حرکت پذیری کے رویے کی نشاندہی کرتا ہے جیسا کہ ذیل میں بتایا گیا ہے:

• پر ' 0% حرکت پذیری، متن کی دھندلاپن کو 0 کے طور پر سیٹ کیا گیا ہے۔
• پر ' پچاس٪ حرکت پذیری، متن کی دھندلاپن کو 1 پر سیٹ کیا گیا ہے۔
• پر ' 100% حرکت پذیری، متن کی دھندلاپن کو 0 پر سیٹ کیا گیا ہے۔

آؤٹ پٹ

مثال 2: ایک سے زیادہ ٹمٹمانے والا متن بنانا

ایچ ٹی ایم ایل میں ایک سے زیادہ ٹمٹمانے والی تحریریں بنانے کے لیے، ذیل میں دیے گئے اقدامات پر عمل کریں:

• سب سے پہلے، ایک جگہ '
  'عنصر اور اسے ایک کلاس تفویض کریں' text-div '
• پھر، دو شامل کریں '

  کچھ متن شامل کرنے کے لیے عناصر۔

• پہلے '

  ' عنصر کو ایک کلاس تفویض کیا گیا ہے ' چمکتا '

• دوسری کو دو کلاسیں تفویض کی گئی ہیں، ' چمکتا 'اور' ایک ' اسٹائل کی خصوصیات کا اعلان کرنے کے لیے سی ایس ایس میں دونوں کلاسز تک رسائی حاصل کی جاتی ہے:

< div کلاس = 'ٹیکسٹ ڈیو' >
< ص کلاس = 'چمکتا ہوا' > Twinkle Twinkle ص >
< ص کلاس = 'چمکتا ہوا' > چھوٹا ستارہ ** ص >
div >

اب، ایچ ٹی ایم ایل کو اسٹائل کرنے کے لیے سی ایس ایس سیکشن کو چیک کریں۔

' عناصر.

انداز 'ٹیکسٹ-ڈائیو' div

.text-div {
چوڑائی: 400px؛
مارجن: کار؛
پس منظر کا رنگ: rgb ( 42 ، 49 ، 49 ) ;
پیڈنگ: 8px؛
}

' .text-div

عنصر تک رسائی کے لیے استعمال کیا جاتا ہے۔ گھوبگھرالی بریکٹ کے اندر، درج ذیل سی ایس ایس خصوصیات '.text-div' پر لاگو ہوتی ہیں:

• ' چوڑائی پراپرٹی عنصر کی چوڑائی کو ایڈجسٹ کرتی ہے۔
• ' مارجن ' عنصر کے ارد گرد جگہ شامل کرتا ہے۔
• ' پس منظر کا رنگ ” پس منظر کا رنگ سیٹ کرتا ہے۔
• ' بھرتی عنصر کی حدود میں جگہ پیدا کرتا ہے۔

اسٹائل 'چمکتی' کلاس

چمکتا ہے {
رنگ: پیلا؛
فونٹ سائز: 40px؛
font-family: cursive;
فونٹ وزن: بولڈ؛
حرکت پذیری: چمکتا طرز 0.6s لکیری لامحدود؛
}

' چمکتا ہے ” کا استعمال HTML

ٹیگز تک رسائی کے لیے کیا جاتا ہے۔ اس کلاس میں درج ذیل خصوصیات کو نافذ کیا گیا ہے:

• ' فونٹ کا وزن ” فونٹ کی موٹائی کی نشاندہی کرتا ہے۔
• مندرجہ بالا سیکشن میں دیگر خصوصیات کی وضاحت کی گئی ہے۔

'Fashing-style' اینیمیشن پر '@keyframe اصول' کا اطلاق کریں۔

@ کی فریمز چمکنے والی طرز {
0 % {
دھندلاپن: 0 ;
}
}

کے رویے کو ایڈجسٹ کریں ' چمکتا انداز 'کا استعمال کرتے ہوئے حرکت پذیری' @keyframe 'قواعد. حرکت پذیری کے آغاز پر، متن کی دھندلاپن 0 ہوگی، جو عناصر کی مکمل شفافیت کی سطح کو ظاہر کرتی ہے۔

دوسری پر اینیمیشن بنانے کے لیے '

'عنصر قدرے مختلف، کلاس' ایک مندرجہ ذیل حرکت پذیری کے انداز کے ساتھ اعلان کیا گیا ہے:

اسٹائل 'ایک' کلاس

ایک {
حرکت پذیری: ایک 1s لکیری لامحدود؛
}
@ کی فریم ایک {
پچاس % {
دھندلاپن: 0 ;
}
}

آؤٹ پٹ

ہم نے مؤثر طریقے سے سیکھا ہے کہ مختلف سی ایس ایس اسٹائلنگ خصوصیات کا استعمال کرتے ہوئے ٹمٹمانے والے متن کو کیسے بنایا جائے۔

نتیجہ

HTML میں، متن کے انداز کو ٹمٹمانے کے لیے کئی سی ایس ایس خصوصیات کا استعمال کیا جاتا ہے۔ ' حرکت پذیری 'اور' دھندلاپن خصوصیات کی عام طور پر اس تناظر میں تعریف کی جاتی ہے۔ پلک جھپکتے رویے کو ایڈجسٹ کرنے کے لیے، ' @keyframe ایک اینیمیشن پراپرٹی کے لیے اصول کا اعلان کیا گیا ہے۔ اس آرٹیکل میں بتایا گیا ہے کہ سی ایس ایس کا استعمال کرتے ہوئے ایچ ٹی ایم ایل میں ٹمٹمانے یا چمکتے ہوئے ٹیکسٹ کیسے بنایا جائے۔