Hogyan készítsünk villogó/villogó szöveget CSS-sel

” elem a div elem közötti fejléc meghatározásához:

---

---

< div osztály = 'villogó stílus' >
< h3 > Linux h3 >
div >

Térjünk át a HTML-elemek stílusának kialakítására.

Stílus „blink-style” div

.villogó stílusban {
háttér: rgb ( 0 , 0 , 0 ) ;
}

A CSS' háttér ' tulajdonság kerül alkalmazásra a div elemre a ' osztályú ' pislogó stílusban ”.

'h3' stílusú elem

h3 {
szöveg igazítása: középre;
font-család: Verdana;
szín: #ffc310;
animáció: blink-text 1.9s lineáris végtelen;
betűméret: 6em;
}

A HTML '

” elemet a következő CSS-tulajdonságok díszítik:

• ' szöveg igazítás ” tulajdonság beállítja az elem szövegének igazítását.
• ' betűtípus család ” betűtípust határoz meg a szöveghez.
• ' szín ” az elem szövegének színezésére szolgál.
• ' élénkség ” az animáció nevét, az animáció időtartamát, az animáció-időzítési függvényt és az animáció-iteráció-számláló tulajdonság értékeit meghatározó rövidített tulajdonság.
• ' betűméret ” tulajdonság főként „px” és „em” egységekben állítja be a betűméretet.

Alkalmazza a „@keyframe szabályt” a „villogó szöveges” animációra

@ kulcskockák villogó szöveg {
0 % {
átlátszatlanság: 0 ;
}
ötven % {
átlátszatlanság: egy ;
}
100 % {
átlátszatlanság: 0 ;
}

Az animáció neve ' villogó szöveg ” van megadva az animáció tulajdonságban. Az ' @keyframe ” szabály kerül hozzáadásra az animáció neve elé, amely az animáció viselkedését jelöli különböző időközönként, az alábbiak szerint:

• Nál nél ' 0% ” animáció esetén a szöveg átlátszatlansága 0.
• Nál nél ' ötven% ” animáció esetén a szöveg átlátszatlansága 1-re van állítva.
• Nál nél ' 100% ” animáció, a szöveg átlátszatlansága 0-ra van állítva.

Kimenet

2. példa: Több villogó szöveg létrehozása

Ha több villogó szöveget szeretne létrehozni a HTML-ben, kövesse az alábbi lépéseket:

• Először helyezzen el egy „
  ' elemet, és rendeljen hozzá egy osztályt ' szöveg-div ”.
• Ezután adjon hozzá két '

  ” elemeket, hogy valamilyen szöveget tartalmazzon.

• Az első „

  ” elemhez egy osztály van hozzárendelve villogó ”.

• A másodikhoz két osztály tartozik: villogó ” és „ egy ”. Mindkét osztály elérhető a CSS-ben a stílustulajdonságok deklarálásához:

< div osztály = 'text-div' >
< p osztály = 'villog' > Twinkle Twinkle p >
< p osztály = 'villog egyet' > Kis csillag * p >
div >

Most nézze meg a CSS részt a HTML stílusának megadásához.

” elemeket.

Stílus „text-div” div

.text-div {
szélesség: 400 képpont;
margó: autó;
háttérszín: rgb ( 42 , 49 , 49 ) ;
padding: 8px;
}

Az ' .text-div ” a

elem eléréséhez használható. A göndör zárójelben a következő CSS-tulajdonságok vonatkoznak a „.text-div”-re:

• ' szélesség ” tulajdonság beállítja az elem szélességét.
• ' árrés ” helyet ad az elem körül.
• ' háttérszín ” állítja be a háttérszínt.
• ' párnázás ” helyet hoz létre az elem határán belül.

Stílus „villogó” osztály

.villog {
szín: sárga;
betűméret: 40 képpont;
font-family: cursive;
betűsúly: félkövér;
animáció: villogó stílusú 0,6 s lineáris végtelen;
}

Az ' .villog ” a HTML

címkék eléréséhez használható. Ebben az osztályban a következő tulajdonságok valósulnak meg:

• ' font-weight ” a betűtípus vastagságát jelzi.
• Az egyéb tulajdonságokat a fenti szakasz ismerteti.

Alkalmazza a „@keyframe szabályt” a „villogó stílusú” animációra

@ kulcskockák villogó stílusban {
0 % {
átlátszatlanság: 0 ;
}
}

Állítsa be a „ villogó stílusú ' animáció a ' @keyframe ” szabályokat. Az animáció elején a szöveg átlátszatlansága 0 lesz, ami az elemek teljes átlátszósági szintjét jelzi.

Az animáció elkészítéséhez a másodikon

'elem kissé eltérő, az osztály' egy ” a következő animációs stílusokkal van deklarálva:

Stílus „egy” osztály

.egy {
animáció: egy 1s lineáris végtelen;
}
@ kulcskockák egy {
ötven % {
átlátszatlanság: 0 ;
}
}

Kimenet

Hatékonyan megtanultuk, hogyan készítsük el a villogó szöveget különböző CSS stílustulajdonságok segítségével.

Következtetés

A HTML-ben számos CSS-tulajdonságot használnak a szövegstílus villogására. Az ' élénkség ” és „ átlátszatlanság ” tulajdonságokat általában ebben az összefüggésben határozzák meg. A villogás beállításához a „ @keyframe ” szabály egy animációs tulajdonsághoz van deklarálva. Ez a cikk elmagyarázza, hogyan lehet villogó vagy villogó szöveget létrehozni HTML-ben CSS használatával.