Kuidas teha CSS-iga vilkuvat/vilkuvat teksti

” element, et määrata pealkiri elemendi div vahel:

---

---

< div klass = 'pilgutamise stiil' >
< h3 > Linux h3 >
div >

Liigume edasi HTML-i elementide kujundamise juurde.

Stiil 'blink-style' jaotus

.blink-stiilis {
taust: rgb ( 0 , 0 , 0 ) ;
}

CSS' taustal ' atribuuti rakendatakse elemendile div klassiga ' vilkuma stiilis ”.

Stiilis 'h3' element

h3 {
teksti joondamine: keskel;
fondiperekond: Verdana;
värv: #ffc310;
animatsioon: vilkuv tekst 1,9 s lineaarne lõpmatu;
fondi suurus: 6 em;
}

HTML'

” element on kaunistatud järgmiste CSS-i omadustega:

• “ teksti joondamine ” atribuut määrab elemendi teksti joonduse.
• “ font-perekond ” määrab teksti fondi stiili.
• “ värvi ” kasutatakse elemendi teksti värvimiseks.
• “ animatsioon ” on stenogrammi atribuut, mis määrab animatsiooni nime, animatsiooni kestuse, animatsiooni ajastuse funktsiooni ja animatsiooni iteratsioonide arvu atribuudi väärtused.
• “ fondi suurus atribuut ” reguleerib fondi suurust peamiselt ühikutes 'px' ja 'em'.

Rakendage 'pilguteksti' animatsioonile @keyframe reegel

@ võtmekaadrid vilkuv tekst {
0 % {
läbipaistmatus: 0 ;
}
viiskümmend % {
läbipaistmatus: üks ;
}
100 % {
läbipaistmatus: 0 ;
}

Animatsiooni nimi ' vilkuv tekst ” on määratud animatsiooni atribuudis. ' @keyframe ” lisatakse animatsiooni nime ette, mis tähistab animatsiooni käitumist erinevate intervallidega, nagu allpool mainitud:

• kohas ' 0% ” animatsiooni, teksti läbipaistmatuse väärtuseks on määratud 0.
• kohas ' viiskümmend% ” animatsiooni, on teksti läbipaistmatuse väärtuseks 1.
• kohas ' 100% ” animatsioon, teksti läbipaistmatus on seatud väärtusele 0.

Väljund

Näide 2: mitme vilkuva teksti loomine

HTML-is mitme vilkuva teksti loomiseks järgige alltoodud samme.

• Esiteks asetage '
  ' element ja määrake sellele klass ' tekst-div ”.
• Seejärel lisage kaks '

  ” elemente, et lisada teksti.

• Esimesele '

  ' elemendile määratakse klass ' vilkuv ”.

• Teisele on määratud kaks klassi, ' vilkuv ” ja „ üks ”. Mõlemale klassile pääseb juurde CSS-is stiiliomaduste deklareerimiseks:

< div klass = 'text-div' >
< lk klass = 'vilgub' > Twinkle Twinkle lk >
< lk klass = 'vilgub üks' > Väike täht * lk >
div >

Nüüd vaadake CSS-i jaotist HTML-i stiili kujundamiseks.

” elemente.

Stiil 'text-div' div

.text-div {
laius: 400 pikslit;
marginaal: auto;
taustavärv: rgb ( 42 , 49 , 49 ) ;
polster: 8px;
}

' .text-div ” kasutatakse elemendile

juurdepääsuks. Lokkis sulgudes rakendatakse tekstile „.text-div” järgmisi CSS-i atribuute:

• “ laius ” atribuut reguleerib elemendi laiust.
• “ marginaal ” lisab elemendi ümber ruumi.
• “ taustavärv ” määrab taustavärvi.
• “ polsterdus ” tekitab ruumi elemendi piirides.

Stiili “vilkuv” klass

.vilgub {
värvus: kollane;
fondi suurus: 40 pikslit;
font-perekond: kursiiv;
fondi kaal: paks;
animatsioon: vilkuv-stiilis 0,6 s lineaarne lõpmatu;
}

' .vilgub ” kasutatakse HTML-i

​​siltidele juurdepääsuks. Selles klassis on rakendatud järgmised omadused:

• “ font-weight ” näitab fondi paksust.
• Teisi omadusi selgitatakse ülaltoodud jaotises.

Rakendage 'vilkuvas stiilis' animatsioonile @keyframe reegel

@ võtmekaadrid vilkuvad {
0 % {
läbipaistmatus: 0 ;
}
}

Reguleerige ' käitumist vilkuv-stiilis ' animatsioon kasutades ' @keyframe ” reeglid. Animatsiooni alguses on teksti läbipaistmatus 0, mis näitab elementide täielikku läbipaistvuse taset.

Animatsiooni tegemiseks teisel

'element veidi erinev, klass' üks ” on deklareeritud järgmiste animatsioonistiilidega:

Stiili 'üks' klass

.üks {
animatsioon: üks 1s lineaarne lõpmatu;
}
@ võtmekaadrid üks {
viiskümmend % {
läbipaistmatus: 0 ;
}
}

Väljund

Oleme tõhusalt õppinud, kuidas vilkuvat teksti teha, kasutades erinevaid CSS-i stiiliomadusi.

Järeldus

HTML-is kasutatakse tekstistiili vilkuma panemiseks mitmeid CSS-i atribuute. ' animatsioon ” ja „ läbipaistmatus ” omadused on selles kontekstis tavaliselt määratletud. Vilkumise käitumise reguleerimiseks kasutage @keyframe ” reegel on deklareeritud animatsiooni atribuudi jaoks. Selles artiklis on selgitatud, kuidas muuta CSS-i abil HTML-is vilkuvat või vilkuvat teksti.