Cum să faci text intermitent/intermitent cu CSS

” element pentru a specifica un titlu între elementul div:

---

---

< div clasă = „stil clipire” >
< h3 > Linux h3 >
div >

Să trecem la stilarea elementelor HTML.

Stil „stil clipire” div

.stil clipire {
fundal: rgb ( 0 , 0 , 0 ) ;
}

CSS „ fundal Proprietatea ” este aplicată elementului div cu clasa “ în stil clipire ”.

Element de stil „h3”.

h3 {
text-align: centru;
familie de fonturi: Verdana;
culoare: #ffc310;
animație: blink-text 1.9s liniar infinit;
dimensiunea fontului: 6em;
}

HTML „

” elementul este decorat cu următoarele proprietăți CSS:

• „ aliniere text ” proprietatea setează alinierea textului elementului.
• „ familie de fonturi ” definește un stil de font pentru text.
• „ culoare ” este folosit pentru a colora textul elementului.
• „ animaţie ” este proprietatea scurtă care specifică numele animației, durata animației, funcția de sincronizare a animației și valorile proprietăților animație-iterație-număr.
• „ marimea fontului ” proprietatea ajustează dimensiunea fontului în principal în unități „px” și „em”.

Aplicați „@keyframe regula” la animația „blink-text”.

@ cadre cheie clipesc-text {
0 % {
opacitate: 0 ;
}
cincizeci % {
opacitate: unu ;
}
100 % {
opacitate: 0 ;
}

Numele animației „ clipi-text ” este specificat în proprietatea animație. „ @cheie ” regula este adăugată înaintea numelui animației care semnifică comportamentul animației la diferite intervale, așa cum este menționat mai jos:

• La „ 0% ” animație, opacitatea textului este setată la 0.
• La „ cincizeci% ” animație, opacitatea textului este setată la 1.
• La „ 100% ” animație, opacitatea textului este setată la 0.

Ieșire

Exemplul 2: Crearea mai multor text intermitent

Pentru a crea mai multe texte intermitente în HTML, urmați pașii de mai jos:

• Mai întâi, plasați un „
  ” element și atribuiți-i o clasă ” text-div ”.
• Apoi, adăugați două „

  ” elemente pentru a include ceva text.

• Primului element „

  ” i se atribuie o clasă „ clipind ”.

• Cel de-al doilea i se atribuie două clase, „ clipind ' și ' unu ”. Ambele clase sunt accesate în CSS pentru a declara proprietățile de stil:

< div clasă = 'text-div' >
< p clasă = 'intermitent' > Twinkle Twinkle p >
< p clasă = „unul intermitent” > Stea mică * p >
div >

Acum, consultați secțiunea CSS pentru a stila HTML-ul „

” elemente.

Stil „text-div” div

.text-div {
latime: 400px;
marjă: mașină;
culoare de fundal: rgb ( 42 , 49 , 49 ) ;
umplutură: 8px;
}

„ .text-div ” este folosit pentru a accesa elementul

. Între paranteze, următoarele proprietăți CSS sunt aplicate la „.text-div”:

• „ lăţime ”proprietatea ajustează lățimea elementului.
• „ marginea ” adaugă spațiu în jurul elementului.
• „ culoare de fundal ” setează culoarea de fundal.
• „ umplutura ” produce spațiu în limita elementului.

Stil clasă „intermitent”.

.intermitent {
culoare: galben;
dimensiunea fontului: 40px;
familie de fonturi: cursiv;
greutate font: bold;
animație: în stil intermitent 0,6s liniar infinit;
}

„ .intermitent ” este folosit pentru a accesa etichetele HTML

. Următoarele proprietăți sunt implementate în această clasă:

• „ grosimea fontului ” indică grosimea fontului.
• Alte proprietăți sunt explicate în secțiunea de mai sus.

Aplicați „regula @keyframe” la animația „în stil intermitent”.

@ cadre cheie în stil intermitent {
0 % {
opacitate: 0 ;
}
}

Ajustați comportamentul lui „ în stil intermitent ” animație folosind „ @cheie ” reguli. La începutul animației, opacitatea textului va fi 0, indicând nivelul complet de transparență al elementelor.

Pentru a face animația pe a doua „

” element ușor diferit, clasa ” unu ” este declarat cu următoarele stiluri de animație:

Stila clasa „unu”.

.unu {
animație: un 1s liniar infinit;
}
@ cadre cheie unul {
cincizeci % {
opacitate: 0 ;
}
}

Ieșire

Am învățat în mod eficient cum să facem textul care clipește folosind diferite proprietăți de stil CSS.

Concluzie

În HTML, mai multe proprietăți CSS sunt utilizate pentru a face stilul textului să clipească. „ animaţie ' și ' opacitate ” proprietățile sunt definite în mod obișnuit în acest context. Pentru a regla comportamentul de clipire, butonul „ @cheie ” este declarată regula pentru o proprietate de animație. Acest articol a explicat cum să faci text intermitent sau intermitent în HTML folosind CSS.