Kako napraviti trepćući/trepereći tekst pomoću CSS-a

” za određivanje naslova između elementa div:

---

---

< div razreda = 'stil treptanja' >
< h3 > Linux h3 >
div >

Prijeđimo na oblikovanje HTML elemenata.

Stil 'stil treptanja' div

.treptajući stil {
pozadina: rgb ( 0 , 0 , 0 ) ;
}

CSS ' pozadina ” svojstvo se primjenjuje na element div s klasom “ u stilu treptanja ”.

Element stila 'h3'.

h3 {
poravnanje teksta: središte;
obitelj-fontova: Verdana;
boja: #ffc310;
animacija: treptaj-tekst 1.9s linearno beskonačno;
veličina fonta: 6em;
}

HTML '

” element je ukrašen sljedećim CSS svojstvima:

• “ poravnanje teksta ” svojstvo postavlja poravnanje teksta elementa.
• “ obitelj-fontova ” definira stil fonta za tekst.
• “ boja ” koristi se za bojanje teksta elementa.
• “ animacija ” je skraćeno svojstvo koje navodi naziv animacije, trajanje animacije, funkciju mjerenja vremena animacije i vrijednosti svojstava broja ponavljanja animacije.
• “ veličina fonta ” Svojstvo prilagođava veličinu fonta uglavnom u jedinicama “px” i “em”.

Primijenite 'pravilo @keyframe' na animaciju 'blink-text'.

@ ključni kadrovi treperi-tekst {
0 % {
neprozirnost: 0 ;
}
pedeset % {
neprozirnost: jedan ;
}
100 % {
neprozirnost: 0 ;
}

Naziv animacije ' blink-tekst ” navedeno je u svojstvu animacije. ' @ključni okvir ” pravilo se dodaje prije naziva animacije koji označava ponašanje animacije u različitim intervalima kao što je navedeno u nastavku:

• u ' 0% ” animacije, neprozirnost teksta postavljena je na 0.
• u ' pedeset% ” animacije, neprozirnost teksta postavljena je na 1.
• u ' 100% ” animacija, neprozirnost teksta postavljena je na 0.

Izlaz

Primjer 2: Izrada višestrukog treptajućeg teksta

Da biste napravili više treptajućih tekstova u HTML-u, slijedite dolje navedene korake:

• Prvo postavite '
  ' element i dodijelite mu klasu ' tekst-div ”.
• Zatim dodajte dva '

  ” za uključivanje teksta.

• Prvom elementu “

  ” dodijeljena je klasa “ bljeskajući ”.

• Drugom su dodijeljene dvije klase, “ bljeskajući ' i ' jedan ”. Objema se klasama pristupa u CSS-u za deklariranje svojstava stila:

< div razreda = 'text-div' >
< str razreda = 'treperi' > Svjetlucanje Svjetlucanje str >
< str razreda = 'treperi jedan' > Mala zvijezda * str >
div >

Sada pogledajte odjeljak CSS da biste stilizirali HTML '

' elementi.

Stil “text-div” div

.text-div {
širina: 400px;
margina: auto;
boja pozadine: rgb ( 42 , 49 , 49 ) ;
ispuna: 8px;
}

' .text-div ” koristi se za pristup

elementu. Unutar vitičastih zagrada, sljedeća CSS svojstva primjenjuju se na '.text-div':

• “ širina ” Svojstvo prilagođava širinu elementa.
• “ margina ” dodaje prostor oko elementa.
• “ boja pozadine ” postavlja boju pozadine.
• “ podstava ” stvara prostor unutar granica elementa.

Stilski “trepereći” razred

.bljeskajući {
boja: žuta;
veličina fonta: 40px;
obitelj-fontova: kurziv;
font-weight: bold;
animacija: treperi u stilu 0,6 s linearno beskonačno;
}

' .bljeskajući ” koristi se za pristup HTML

oznakama. Sljedeća svojstva su implementirana u ovoj klasi:

• “ težina fonta ” označava debljinu fonta.
• Ostala svojstva objašnjena su u gornjem odjeljku.

Primijenite 'pravilo @keyframe' na animaciju u 'treperećem stilu'.

@ ključni okviri treperi u stilu {
0 % {
neprozirnost: 0 ;
}
}

Prilagodite ponašanje ' bljeskajući stil ' animacija pomoću ' @ključni okvir ” pravila. Na početku animacije neprozirnost teksta bit će 0, označavajući potpunu razinu prozirnosti elemenata.

Za izradu animacije na drugom '

'element nešto drugačiji, klasa' jedan ” je deklariran sa sljedećim stilovima animacije:

Stil 'jedan' razred

.jedan {
animacija: jedna 1s linearna beskonačna;
}
@ ključni kadrovi jedan {
pedeset % {
neprozirnost: 0 ;
}
}

Izlaz

Učinkovito smo naučili kako napraviti treptajući tekst koristeći različita svojstva CSS stila.

Zaključak

U HTML-u koristi se nekoliko svojstava CSS-a kako bi stil teksta treperio. ' animacija ' i ' neprozirnost ” svojstva se obično definiraju u ovom kontekstu. Za podešavanje ponašanja treptanja, ' @ključni okvir ” pravilo je deklarirano za svojstvo animacije. U ovom je članku objašnjeno kako pomoću CSS-a napraviti trepćući ili bljeskajući tekst u HTML-u.