Vilkkuvan/vilkkuvan tekstin tekeminen CSS:llä

”-elementti määrittääksesi otsikon div-elementin väliin:

---

---

< div luokkaa = 'vilkkutyyli' >
< h3 > Linux h3 >
div >

Siirrytään eteenpäin HTML-elementtien muotoiluun.

Tyyli 'blink-style' jako

.blink-tyyliin {
tausta: rgb ( 0 , 0 , 0 ) ;
}

CSS' tausta '-ominaisuutta sovelletaan div-elementtiin luokan ' blink-tyyliin ”.

Tyyli 'h3' Element

h3 {
tekstin tasaus: keskellä;
kirjasinperhe: Verdana;
väri: #ffc310;
animaatio: vilkkuva teksti 1.9s lineaarinen ääretön;
fontin koko: 6em;
}

HTML '

”-elementti on koristeltu seuraavilla CSS-ominaisuuksilla:

• ' tekstin tasaus ”-ominaisuus määrittää elementin tekstin tasauksen.
• ' font-perhe ” määrittää tekstin fonttityylin.
• ' väri- ' käytetään elementin tekstin värittämiseen.
• ' animaatio ” on lyhennetty ominaisuus, joka määrittää animaation nimen, animaation keston, animaation ajoitusfunktion ja animation iteration-count ominaisuuden arvot.
• ' Fonttikoko ”-ominaisuus säätää kirjasinkokoa pääasiassa 'px'- ja 'em'-yksiköissä.

Käytä @keyframe-sääntöä 'vilkkuteksti'-animaatioon

@ avainkehykset vilkkuva teksti {
0 % {
opasiteetti: 0 ;
}
viisikymmentä % {
opasiteetti: yksi ;
}
100 % {
opasiteetti: 0 ;
}

animaation nimi ' vilkkuva teksti ” on määritetty animaatio-ominaisuudesta. ' @avainkehys ” sääntö lisätään animaation nimen eteen, joka ilmaisee animaation käyttäytymistä eri aikavälein, kuten alla on mainittu:

• klo ' 0 % ”-animaatio, tekstin peittävyydeksi asetetaan 0.
• klo ' viisikymmentä% ”-animaatio, tekstin peittävyydeksi on asetettu 1.
• klo ' 100 % ” animaatio, tekstin läpinäkyvyys on asetettu arvoon 0.

Lähtö

Esimerkki 2: Useiden vilkkuvien tekstien tekeminen

Jos haluat lisätä HTML-koodiin useita vilkkuvia tekstejä, noudata alla olevia ohjeita:

• Aseta ensin '
  'elementti ja määritä sille luokka' teksti-div ”.
• Lisää sitten kaksi '

  ”-elementtejä sisällyttääksesi tekstiä.

• Ensimmäiselle '

  ' -elementille on määritetty luokka ' vilkkuu ”.

• Toiselle on määritetty kaksi luokkaa, ' vilkkuu ' ja ' yksi ”. Molempia luokkia käytetään CSS:ssä tyyliominaisuuksien ilmoittamiseksi:

< div luokkaa = 'teksti-div' >
< s luokkaa = 'vilkkuu' > Tuiki tuiki s >
< s luokkaa = 'vilkkuu yksi' > Pieni tähti * s >
div >

Tarkista nyt CSS-osio muokataksesi HTML-koodia '

”elementtejä.

Tyyli 'text-div' div

.text-div {
leveys: 400px;
 margin: auto;
taustaväri: rgb ( 42 , 49 , 49 ) ;
täyte: 8px;
}

' .text-div ' käytetään

-elementin avaamiseen. Hakasulkeissa seuraavia CSS-ominaisuuksia sovelletaan '.text-div' -tiedostoon:

• ' leveys ”-ominaisuus säätää elementin leveyttä.
• ' marginaali ” lisää tilaa elementin ympärille.
• ' taustaväri ” määrittää taustavärin.
• ' pehmuste ” tuottaa tilaa elementin rajojen sisällä.

Tyyli 'vilkkuva' luokka

.vilkkuu {
väri: keltainen;
fonttikoko: 40px;
font-family: kursiivinen;
fontin paino: lihavoitu;
animaatio: vilkkuvatyylinen 0.6s lineaarinen ääretön;
}

' .vilkkuu ' käytetään HTML

-tunnisteiden käyttämiseen. Seuraavat ominaisuudet on toteutettu tässä luokassa:

• ' fontin paino ” osoittaa fontin paksuuden.
• Muut ominaisuudet on selitetty yllä olevassa osiossa.

Käytä @keyframe-sääntöä 'vilkkuvaan tyyliin'.

@ avainkehykset vilkkuvat tyyliin {
0 % {
opasiteetti: 0 ;
}
}

Säädä '' vilkkuva tyyli '-animaatio käyttämällä ' @avainkehys ”säännöt. Animaation alussa tekstin läpinäkyvyys on 0, mikä osoittaa elementtien täydellisen läpinäkyvyyden.

Animaation tekeminen toisella '

”elementti hieman erilainen, luokka” yksi ” on ilmoitettu seuraavilla animaatiotyyleillä:

Tyyli 'yksi' luokka

.yksi {
animaatio: yksi 1s lineaarinen ääretön;
}
@ avainkehykset yksi {
viisikymmentä % {
opasiteetti: 0 ;
}
}

Lähtö

Olemme oppineet tehokkaasti tekemään vilkkuvan tekstin käyttämällä erilaisia ​​CSS-tyyliominaisuuksia.

Johtopäätös

HTML:ssä käytetään useita CSS-ominaisuuksia saamaan tekstityyli vilkkumaan. ' animaatio ' ja ' opasiteetti ”-ominaisuudet määritellään yleisesti tässä yhteydessä. Säädäksesi vilkkumista, paina ' @avainkehys ” sääntö on ilmoitettu animaatioominaisuudesta. Tässä artikkelissa on selitetty, kuinka vilkkuvaa tai vilkkuvaa tekstiä tehdään HTML:ssä CSS:n avulla.