Kako narediti utripajoče/utripajoče besedilo s CSS

” za določitev naslova med elementom div:

---

---

< div razred = 'slog miganja' >
< h3 > Linux h3 >
div >

Pojdimo naprej k oblikovanju elementov HTML.

Slog »mežikanja« div

.mežikati {
ozadje: rgb ( 0 , 0 , 0 ) ;
}

CSS ' ozadje Lastnost se uporabi za element div z razredom v stilu miganja ”.

Element sloga 'h3'.

h3 {
poravnava besedila: sredina;
družina pisav: Verdana;
barva: #ffc310;
animacija: utripanje besedila 1,9s linearno neskončno;
velikost pisave: 6em;
}

HTML '

” element je okrašen z naslednjimi lastnostmi CSS:

• “ poravnava besedila ” lastnost nastavi poravnavo besedila elementa.
• “ družina pisav ” določa slog pisave za besedilo.
• “ barva ” se uporablja za barvanje besedila elementa.
• “ animacija ” je skrajšana lastnost, ki določa ime animacije, trajanje animacije, funkcijo merjenja časa animacije in vrednosti lastnosti števila ponovitev animacije.
• “ velikost pisave ” prilagodi velikost pisave predvsem v enotah “px” in “em”.

Uporabite »pravilo @keyframe« za animacijo »mežikanje besedila«.

@ ključne sličice utripajo-besedilo {
0 % {
motnost: 0 ;
}
petdeset % {
motnost: eno ;
}
100 % {
motnost: 0 ;
}

Ime animacije ' utripanje besedila ” je določeno v lastnosti animacije. ' @ključni okvir ” je dodano pravilo pred imenom animacije, ki označuje obnašanje animacije v različnih intervalih, kot je navedeno spodaj:

• pri “ 0 % ” je motnost besedila nastavljena na 0.
• pri “ petdeset % ” je motnost besedila nastavljena na 1.
• pri “ 100 % ” animacija, motnost besedila je nastavljena na 0.

Izhod

Primer 2: Izdelava več utripajočih besedil

Če želite narediti več utripajočih besedil v HTML, sledite spodnjim korakom:

• Najprej postavite '
  ' element in mu dodelite razred ' text-div ”.
• Nato dodajte dva '

  ” za vključitev besedila.

• Prvemu elementu “

  ” je dodeljen razred “ utripajoča ”.

• Drugemu sta dodeljena dva razreda, ' utripajoča « in » eno ”. Do obeh razredov lahko dostopate v CSS, da deklarirate lastnosti sloga:

< div razred = 'text-div' >
< str razred = 'utripa' > Utripaj Utripaj str >
< str razred = 'utripajoča' > Zvezdica * str >
div >

Zdaj si oglejte razdelek CSS, da oblikujete HTML '

” elementi.

Slog 'text-div' div

.text-div {
širina: 400px;
rob: avto;
barva ozadja: rgb ( 42 , 49 , 49 ) ;
oblazinjenje: 8px;
}

' .text-div ” se uporablja za dostop do elementa

. Znotraj zavitih oklepajev se za ».text-div« uporabijo naslednje lastnosti CSS:

• “ premer Lastnost prilagodi širino elementa.
• “ marža ” doda prostor okoli elementa.
• “ Barva ozadja ” nastavi barvo ozadja.
• “ oblazinjenje ” ustvari prostor znotraj meje elementa.

Slog 'utripa' razred

.utripa {
barva: rumena;
velikost pisave: 40px;
družina pisav: kurziv;
teža pisave: krepko;
animacija: utripajoča linearna neskončna 0,6 s;
}

' .utripa ” se uporablja za dostop do oznak HTML

. V tem razredu so implementirane naslednje lastnosti:

• “ teža pisave ” označuje debelino pisave.
• Druge lastnosti so razložene v zgornjem razdelku.

Za animacijo v slogu utripanja uporabite »pravilo @keyframe«.

@ utripajoče ključne sličice {
0 % {
motnost: 0 ;
}
}

Prilagodite vedenje » utripajoči slog ' animacija z uporabo ' @ključni okvir ” pravila. Na začetku animacije bo motnost besedila 0, kar označuje popolno stopnjo prosojnosti elementov.

Za izdelavo animacije na drugi '

»element nekoliko drugačen, razred« eno ” je deklariran z naslednjimi slogi animacije:

Slog 'en' razred

.ena {
animacija: ena 1s linearna neskončna;
}
@ ključne sličice ena {
petdeset % {
motnost: 0 ;
}
}

Izhod

Učinkovito smo se naučili, kako narediti utripajoče besedilo z različnimi slogovnimi lastnostmi CSS.

Zaključek

V HTML je več lastnosti CSS uporabljenih za utripanje sloga besedila. ' animacija « in » nepreglednost ” lastnosti so običajno definirane v tem kontekstu. Če želite prilagoditi utripanje, » @ključni okvir ” je navedeno pravilo za lastnost animacije. V tem članku je razloženo, kako ustvariti utripajoče ali utripajoče besedilo v HTML s pomočjo CSS.