כיצד ליצור טקסט מהבהב/מהבהב עם CSS

' רכיב כדי לציין כותרת בין אלמנט div:

---

---

< div מעמד = 'בסגנון מצמוץ' >
< h3 > לינוקס h3 >
div >

בואו נתקדם לעיצוב רכיבי ה-HTML.

סגנון 'ממצמץ בסגנון' div

.סגנון מצמוץ {
רקע: rgb ( 0 , 0 , 0 ) ;
}

ה-CSS ' רקע כללי המאפיין מוחל על רכיב div עם המחלקה ' בסגנון מצמוץ '.

אלמנט 'h3' בסגנון

h3 {
יישור טקסט: מרכז;
משפחת גופנים: ורדנה;
צֶבַע: #ffc310;
אנימציה: מצמוץ-טקסט 1.9 שניות ליניארי אינסופי;
גודל גופן: 6em;
}

ה-HTML '

אלמנט ' מעוטר במאפייני ה-CSS הבאים:

• ' יישור טקסט ' מאפיין מגדיר את היישור של הטקסט של האלמנט.
• ' משפחת גופן ' מגדיר סגנון גופן לטקסט.
• ' צֶבַע ' משמש לצביעת הטקסט של האלמנט.
• ' אנימציה ” הוא מאפיין הקיצור המציין את שם האנימציה, משך ההנפשה, פונקציית תזמון הנפשה וערכי מאפיין האנימציה-איטרציות.
• ' גודל גופן ' מאפיין מתאים את גודל הגופן בעיקר ביחידות 'px' ו-'em'.

החל את '@keyframe rule' על הנפשה של 'link-text'.

@ keyframes blink-text {
0 % {
אֲטִימוּת: 0 ;
}
חמישים % {
אֲטִימוּת: אחד ;
}
100 % {
אֲטִימוּת: 0 ;
}

שם האנימציה ' מצמוץ-טקסט ” מצוין במאפיין האנימציה. ה ' @keyframe ' הכלל מתווסף לפני שם האנימציה המסמל את התנהגות האנימציה במרווחי זמן שונים כמוזכר להלן:

• ב' 0% ' אנימציה, אטימות הטקסט מוגדרת כ-0.
• ב' חמישים% ' אנימציה, אטימות הטקסט מוגדרת ל-1.
• ב' 100% ' אנימציה, אטימות הטקסט מוגדרת ל-0.

תְפוּקָה

דוגמה 2: יצירת טקסט מרובה מהבהב

כדי ליצור טקסטים מהבהבים מרובים ב-HTML, בצע את השלבים הבאים:

• ראשית, הצב '
  ' רכיב ולהקצות לו מחלקה ' טקסט-div '.
• לאחר מכן, הוסף שניים '

  ' אלמנטים כדי לכלול טקסט כלשהו.

• לרכיב '

  ' הראשון מוקצה מחלקה ' הַברָקָה '.

• לשני כיתות, ' הַברָקָה ' ו' אחד '. שני המחלקות נגישים ב-CSS כדי להצהיר על מאפייני סגנון:

< div מעמד = 'טקסט-div' >
< ע מעמד = 'הַברָקָה' > נצנץ נצנץ ע >
< ע מעמד = 'אחד מהבהב' > כוכב קטן * ע >
div >

כעת, עיין בסעיף ה-CSS לסגנון ה-HTML '

' אלמנטים.

סגנון 'טקסט-div' div

.text-div {
רוחב: 400 פיקסלים;
שוליים: מכונית;
צבע רקע: rgb ( 42 , 49 , 49 ) ;
ריפוד: 8px;
}

ה ' .text-div ' משמש לגישה לרכיב

. בתוך הסוגריים המתולתלים, מאפייני ה-CSS הבאים מוחלים על ה-'.text-div':

• ' רוֹחַב ' מאפיין מתאים את רוחב האלמנט.
• ' שולים ' מוסיף מקום מסביב לאלמנט.
• ' צבע רקע ' מגדיר את צבע הרקע.
• ' ריפוד ' מייצר מרחב בתוך הגבול של האלמנט.

שיעור 'מהבהב' בסגנון

.הַברָקָה {
צבע: צהוב;
גודל גופן: 40px;
font-family: cursive;
מודגש;
אנימציה: מהבהב בסגנון 0.6s ליניארי אינסופי;
}

ה ' .הַברָקָה ' משמש לגישה לתגיות HTML

. המאפיינים הבאים מיושמים במחלקה זו:

• ' משקל גופן ' מציין את עובי הגופן.
• מאפיינים אחרים מוסברים בסעיף לעיל.

החל את '@keyframe rule' על אנימציה 'בסגנון מהבהב'.

@ מסגרות מפתח מהבהבות {
0 % {
אֲטִימוּת: 0 ;
}
}

התאם את ההתנהגות של ' מהבהב בסגנון ' אנימציה באמצעות ' @keyframe 'כללים. בתחילת האנימציה, אטימות הטקסט תהיה 0, מה שמצביע על רמת השקיפות המלאה של האלמנטים.

כדי לעשות את האנימציה על השני '

' אלמנט מעט שונה, המחלקה ' אחד 'מוכרז עם סגנונות האנימציה הבאים:

סגנון 'אחד' שיעור

.אחד {
אנימציה: one 1s ליניארי אינסופי;
}
@ keyframes אחד {
חמישים % {
אֲטִימוּת: 0 ;
}
}

תְפוּקָה

למדנו ביעילות כיצד ליצור את הטקסט המהבהב באמצעות מאפייני סגנון CSS שונים.

סיכום

ב-HTML, מספר מאפייני CSS משמשים כדי לגרום לסגנון הטקסט להבהב. ה ' אנימציה ' ו' אֲטִימוּת מאפיינים נהוג להגדיר בהקשר זה. כדי להתאים את התנהגות ההבהוב, ' @keyframe ' הכלל מוכרז עבור מאפיין אנימציה. מאמר זה הסביר כיצד ליצור טקסט מהבהב או מהבהב ב-HTML באמצעות CSS.