সিএসএস দিয়ে কীভাবে ব্লিঙ্কিং/ফ্ল্যাশিং টেক্সট তৈরি করবেন

div উপাদানের মধ্যে একটি শিরোনাম নির্দিষ্ট করতে উপাদান:

---

---

< div ক্লাস = 'ব্লিঙ্ক-স্টাইল' >
< h3 > লিনাক্স h3 >
div >

এইচটিএমএল উপাদান স্টাইল করতে এগিয়ে চলুন.

স্টাইল 'ব্লিঙ্ক-স্টাইল' ডিভ

.ব্লিঙ্ক-স্টাইল {
ব্যাকগ্রাউন্ড: আরজিবি ( 0 , 0 , 0 ) ;
}

সিএসএস ' পটভূমি 'শ্রেণীর সাথে div উপাদানে সম্পত্তি প্রয়োগ করা হয়' blink-শৈলী ”

স্টাইল 'h3' উপাদান

h3 {
টেক্সট-সারিবদ্ধ: কেন্দ্র;
font-family: Verdana;
রঙ: #ffc310;
অ্যানিমেশন: ব্লিঙ্ক-টেক্সট 1.9 রৈখিক অসীম;
ফন্ট-আকার: 6em;
}

এইচটিএমএল '

” উপাদান নিম্নলিখিত CSS বৈশিষ্ট্য দিয়ে সজ্জিত করা হয়েছে:

• ' পাঠ্য-সারিবদ্ধ ' সম্পত্তি উপাদানের পাঠ্যের প্রান্তিককরণ সেট করে।
• ' ফন্ট-পরিবার ” পাঠ্যের জন্য একটি ফন্ট শৈলী সংজ্ঞায়িত করে।
• ' রঙ ” উপাদানটির পাঠ্যকে রঙ করতে ব্যবহৃত হয়।
• ' অ্যানিমেশন ” হল শর্টহ্যান্ড প্রপার্টি যা অ্যানিমেশনের নাম, অ্যানিমেশনের সময়কাল, অ্যানিমেশন-টাইমিং ফাংশন এবং অ্যানিমেশন-পুনরাবৃত্তি-গণনা সম্পত্তির মান নির্দিষ্ট করে।
• ' অক্ষরের আকার ' সম্পত্তি প্রধানত 'px' এবং 'em' ইউনিটে ফন্টের আকার সামঞ্জস্য করে।

'ব্লিঙ্ক-টেক্সট' অ্যানিমেশনে '@keyframe নিয়ম' প্রয়োগ করুন

@ কীফ্রেম ব্লিঙ্ক-টেক্সট {
0 % {
অস্বচ্ছতা: 0 ;
}
পঞ্চাশ % {
অস্বচ্ছতা: এক ;
}
100 % {
অস্বচ্ছতা: 0 ;
}

অ্যানিমেশনের নাম ' ব্লিঙ্ক-টেক্সট ” অ্যানিমেশন সম্পত্তিতে নির্দিষ্ট করা আছে। দ্য ' @কীফ্রেম ” নিয়মটি অ্যানিমেশন নামের আগে যোগ করা হয়েছে যা নীচে উল্লিখিত বিভিন্ন বিরতিতে অ্যানিমেশন আচরণকে নির্দেশ করে:

• এ ' 0% ” অ্যানিমেশন, পাঠ্য অস্বচ্ছতা 0 হিসাবে সেট করা হয়েছে।
• এ ' পঞ্চাশ% ” অ্যানিমেশন, পাঠ্য অস্বচ্ছতা 1 এ সেট করা হয়েছে।
• এ ' 100% ” অ্যানিমেশন, পাঠ্য অস্বচ্ছতা 0 এ সেট করা হয়েছে।

আউটপুট

উদাহরণ 2: একাধিক ব্লিঙ্কিং টেক্সট তৈরি করা

HTML-এ একাধিক ব্লিঙ্কিং টেক্সট তৈরি করতে, নীচের প্রদত্ত পদক্ষেপগুলি অনুসরণ করুন:

• প্রথমে একটি '
  ' উপাদান এবং এটি একটি ক্লাস বরাদ্দ ' text-div ”
• তারপর, দুটি যোগ করুন '

  কিছু টেক্সট অন্তর্ভুক্ত করার জন্য উপাদান।

• প্রথম '

  ' উপাদানটিকে একটি ক্লাস বরাদ্দ করা হয়েছে ' ঝলকানি ”

• দ্বিতীয়টি দুটি ক্লাস বরাদ্দ করা হয়েছে, ' ঝলকানি ' এবং ' এক ” স্টাইলিং বৈশিষ্ট্য ঘোষণা করতে উভয় ক্লাসই CSS-এ অ্যাক্সেস করা হয়:

< div ক্লাস = 'টেক্সট-ডিভ' >
< পি ক্লাস = 'ঝলকানি' > টুইঙ্কল টুইঙ্কল পি >
< পি ক্লাস = 'এক ঝলকানি' > ছোট তারা * পি >
div >

এখন, এইচটিএমএল স্টাইল করতে CSS বিভাগটি দেখুন “

' উপাদান।

স্টাইল 'টেক্সট-ডিভ' ডিভ

.text-div {
প্রস্থ: 400px;
margin: car;
ব্যাকগ্রাউন্ড-রঙ: rgb ( 42 , 49 , 49 ) ;
প্যাডিং: 8px;
}

দ্য ' .text-div

উপাদান অ্যাক্সেস করতে ব্যবহার করা হয়। কোঁকড়া বন্ধনীর মধ্যে, নিম্নলিখিত CSS বৈশিষ্ট্যগুলি “.text-div”-এ প্রয়োগ করা হয়:

• ' প্রস্থ ' সম্পত্তি উপাদানের প্রস্থ সামঞ্জস্য করে।
• ' মার্জিন ” উপাদানের চারপাশে স্থান যোগ করে।
• ' পেছনের রং ” পটভূমির রঙ সেট করে।
• ' প্যাডিং ' উপাদানের সীমানার মধ্যে স্থান তৈরি করে।

স্টাইল 'ফ্ল্যাশিং' ক্লাস

ঝলকানি {
রঙ: হলুদ;
ফন্ট-আকার: 40px;
font-family: cursive;
font-weight: গাঢ়;
অ্যানিমেশন: ফ্ল্যাশিং-স্টাইল 0.6s লিনিয়ার ইনফিনিট;
}

দ্য ' ঝলকানি ” HTML

ট্যাগ অ্যাক্সেস করতে ব্যবহৃত হয়। নিম্নলিখিত বৈশিষ্ট্যগুলি এই শ্রেণীতে প্রয়োগ করা হয়:

• ' ফন্ট-ওজন ” ফন্টের পুরুত্ব নির্দেশ করে।
• অন্যান্য বৈশিষ্ট্য উপরের বিভাগে ব্যাখ্যা করা হয়েছে.

'ফ্ল্যাশিং-স্টাইল' অ্যানিমেশনে '@keyframe নিয়ম' প্রয়োগ করুন

@ কীফ্রেম ফ্ল্যাশিং-স্টাইল {
0 % {
অস্বচ্ছতা: 0 ;
}
}

এর আচরণ সামঞ্জস্য করুন ' ঝলকানি শৈলী 'অ্যানিমেশন ব্যবহার করে' @কীফ্রেম 'বিধি। অ্যানিমেশনের শুরুতে, পাঠ্যের অস্বচ্ছতা 0 হবে, যা উপাদানগুলির সম্পূর্ণ স্বচ্ছতার স্তর নির্দেশ করে।

দ্বিতীয়টিতে অ্যানিমেশন তৈরি করতে “

' উপাদানটি কিছুটা ভিন্ন, ক্লাস ' এক নিম্নলিখিত অ্যানিমেশন শৈলীর সাথে ঘোষণা করা হয়েছে:

শৈলী 'এক' বর্গ

.এক {
অ্যানিমেশন: এক 1s রৈখিক অসীম;
}
@ কীফ্রেম এক {
পঞ্চাশ % {
অস্বচ্ছতা: 0 ;
}
}

আউটপুট

আমরা কার্যকরভাবে শিখেছি কিভাবে বিভিন্ন CSS স্টাইলিং বৈশিষ্ট্য ব্যবহার করে ব্লিঙ্কিং টেক্সট তৈরি করতে হয়।

উপসংহার

এইচটিএমএল-এ, টেক্সট শৈলীকে ব্লিঙ্কিং করতে বেশ কিছু CSS বৈশিষ্ট্য ব্যবহার করা হয়। দ্য ' অ্যানিমেশন ' এবং ' অস্বচ্ছতা ' বৈশিষ্ট্যগুলি সাধারণত এই প্রসঙ্গে সংজ্ঞায়িত করা হয়৷ জ্বলজ্বলে আচরণ সামঞ্জস্য করতে, ' @কীফ্রেম ” নিয়ম একটি অ্যানিমেশন সম্পত্তির জন্য ঘোষণা করা হয়। এই নিবন্ধটি ব্যাখ্যা করেছে কিভাবে CSS ব্যবহার করে HTML এ ব্লিঙ্কিং বা ফ্ল্যাশিং টেক্সট তৈরি করা যায়।