Kā izveidot mirgojošu/mirgojošu tekstu, izmantojot CSS

” elements, lai norādītu virsrakstu starp div elementu:

---

---

< div klasē = 'mirkšķināšanas stils' >
< h3 > Linux h3 >
div >

Pāriesim uz HTML elementu stilu.

Stils “blink-style” div

.mirkšķināšanas stilā {
fons: rgb ( 0 , 0 , 0 ) ;
}

CSS ' fons ' rekvizīts tiek piemērots div elementam ar klasi ' mirgošanas stils ”.

Stila “h3” elements

h3 {
teksta līdzināšana: centrs;
fontu saime: Verdana;
krāsa: #ffc310;
animācija: blink-text 1.9s lineārs bezgalīgs;
fonta izmērs: 6em;
}

HTML '

” elements ir dekorēts ar šādiem CSS rekvizītiem:

• ' teksta līdzināšana Īpašums iestata elementa teksta līdzinājumu.
• ' fontu ģimene ” definē teksta fonta stilu.
• ' krāsa ” tiek izmantots, lai krāsotu elementa tekstu.
• ' animācija ” ir saīsināts rekvizīts, kas norāda animācijas nosaukumu, animācijas ilgumu, animācijas laika funkciju un animācijas iterāciju skaita rekvizītu vērtības.
• ' fonta izmērs ” īpašums pielāgo fonta lielumu galvenokārt vienībās “px” un “em”.

Lietojiet “@keyframe kārtulu” “mirgojoša teksta” animācijai

@ atslēgas kadri mirgojošs teksts {
0 % {
necaurredzamība: 0 ;
}
piecdesmit % {
necaurredzamība: viens ;
}
100 % {
necaurredzamība: 0 ;
}

Animācijas nosaukums ' mirgojošs teksts ” ir norādīts animācijas rekvizītā. ' @keyframe ” noteikums tiek pievienots pirms animācijas nosaukuma, kas apzīmē animācijas darbību dažādos intervālos, kā minēts tālāk:

• Pie “ 0% ” animāciju, teksta necaurredzamība ir iestatīta kā 0.
• Pie “ piecdesmit% ” animāciju, teksta necaurredzamība ir iestatīta uz 1.
• Pie “ 100% ” animācija, teksta necaurredzamība ir iestatīta uz 0.

Izvade

2. piemērs. Vairāku mirgojošu tekstu izveide

Lai HTML kodā izveidotu vairākus mirgojošus tekstus, veiciet tālāk norādītās darbības.

• Vispirms ievietojiet '
  ' elementu un piešķiriet tam klasi ' text-div ”.
• Pēc tam pievienojiet divus '

  ” elementi, lai iekļautu kādu tekstu.

• Pirmajam “

  ” elementam tiek piešķirta klase “ mirgo ”.

• Otrajai ir iedalītas divas klases, ' mirgo ' un ' viens ”. Abām klasēm var piekļūt CSS, lai deklarētu stila īpašības:

< div klasē = 'text-div' >
< lpp klasē = 'mirgo' > Twinkle Twinkle lpp >
< lpp klasē = 'mirgo viens' > Maza zvaigzne * lpp >
div >

Tagad apskatiet CSS sadaļu, lai veidotu HTML stilu.

” elementi.

Stils “text-div” div

.text-div {
platums: 400 pikseļi;
piemale: auto;
fona krāsa: rgb ( 42 , 49 , 49 ) ;
polsterējums: 8px;
}

' .text-div ” tiek izmantots, lai piekļūtu elementam

. Šaurajās iekavās failam “.text-div” tiek lietoti šādi CSS rekvizīti:

• ' platums ” rekvizīts pielāgo elementa platumu.
• ' starpība ” pievieno vietu ap elementu.
• ' fona krāsa ” iestata fona krāsu.
• ' polsterējums ” rada vietu elementa robežās.

Stila “mirgojoša” klase

.mirgo {
krāsa: dzeltena;
fonta izmērs: 40 pikseļi;
fontu saime: kursīvs;
fonta svars: treknrakstā;
animācija: mirgojoša stila 0,6 s lineāra bezgalīga;
}

' .mirgo ” tiek izmantots, lai piekļūtu HTML

tagiem. Šajā klasē ir ieviesti šādi rekvizīti:

• ' fonta svars ” norāda fonta biezumu.
• Citas īpašības ir izskaidrotas iepriekšējā sadaļā.

Lietojiet “@keyframe kārtulu” “mirgojoša stila” animācijai

@ atslēgas kadri mirgojošā stilā {
0 % {
necaurredzamība: 0 ;
}
}

Pielāgojiet 'uzvedību' mirgojošā stilā ' animācija, izmantojot ' @keyframe ” noteikumi. Animācijas sākumā teksta necaurredzamība būs 0, kas norāda elementu pilnīgu caurspīdīguma līmeni.

Lai izveidotu animāciju otrajā '

'elements nedaudz atšķiras, klase ' viens ” ir deklarēts ar šādiem animācijas stiliem:

Stila “viena” klase

.viens {
animācija: viens 1s lineārs bezgalīgs;
}
@ atslēgas kadri viens {
piecdesmit % {
necaurredzamība: 0 ;
}
}

Izvade

Mēs esam efektīvi iemācījušies, kā izveidot mirgojošu tekstu, izmantojot dažādas CSS stila īpašības.

Secinājums

HTML valodā tiek izmantoti vairāki CSS rekvizīti, lai teksta stils mirgotu. ' animācija ' un ' necaurredzamība ” šajā kontekstā parasti tiek definētas īpašības. Lai pielāgotu mirgošanas darbību, ' @keyframe ” noteikums ir deklarēts animācijas īpašumam. Šajā rakstā ir paskaidrots, kā izveidot mirgojošu vai mirgojošu tekstu HTML, izmantojot CSS.