Paano Gumawa ng Blinking/Flashing Text Gamit ang CSS

” element upang tukuyin ang isang heading sa pagitan ng div element:

---

---

< div klase = 'kurap-kurap' >
< h3 > Linux h3 >
div >

Magpatuloy tayo sa pag-istilo sa mga elemento ng HTML.

Istilo 'blink-style' div

.blink-style {
background: rgb ( 0 , 0 , 0 ) ;
}

Ang CSS ' background 'Ang pag-aari ay inilapat sa elemento ng div na may klase ' blink-style ”.

Istilo ng 'h3' Element

h3 {
text-align: center;
font-family: Verdana;
kulay: #ffc310;
animation: blink-text 1.9s linear infinite;
laki ng font: 6em;
}

Ang HTML '

” elemento ay pinalamutian ng mga sumusunod na katangian ng CSS:

• “ text-align Itinatakda ng ” property ang pagkakahanay ng text ng elemento.
• “ font-family ” ay tumutukoy sa istilo ng font para sa teksto.
• “ kulay ” ay ginagamit upang kulayan ang teksto ng elemento.
• “ animation ” ay ang shorthand property na tumutukoy sa animation name, animation duration, animation-timing function, at animation-iteration-count property values.
• “ laki ng font Inaayos ng property ng ” ang laki ng font pangunahin sa mga unit na “px” at “em”.

Ilapat ang '@keyframe rule' sa animation na 'blink-text'.

@ keyframes blink-text {
0 % {
opacity: 0 ;
}
limampu % {
opacity: isa ;
}
100 % {
opacity: 0 ;
}

Ang pangalan ng animation ' blink-text ” ay tinukoy sa property ng animation. Ang ' @keyframe Ang panuntunang ” ay idinaragdag bago ang pangalan ng animation na nagpapahiwatig ng pagkilos ng animation sa iba't ibang agwat tulad ng nabanggit sa ibaba:

• sa ' 0% ” animation, ang opacity ng teksto ay itinakda bilang 0.
• sa ' limampung% ” animation, ang text opacity ay nakatakda sa 1.
• sa ' 100% ” animation, ang opacity ng teksto ay nakatakda sa 0.

Output

Halimbawa 2: Paggawa ng Multiple Blinking Text

Upang gumawa ng maraming kumikislap na teksto sa HTML, sundin ang mga hakbang na ibinigay sa ibaba:

• Una, maglagay ng '
  'elemento at italaga ito ng isang klase' text-div ”.
• Pagkatapos, magdagdag ng dalawang '

  ” mga elemento upang isama ang ilang teksto.

• Ang unang '

  ' na elemento ay itinalaga ng isang klase na ' kumikislap ”.

• Ang pangalawa ay itinalaga ng dalawang klase, ' kumikislap 'at' isa ”. Ang parehong mga klase ay na-access sa CSS upang ideklara ang mga katangian ng pag-istilo:

< div klase = 'text-div' >
< p klase = ' kumikislap ' > Twinkle Twinkle p >
< p klase = 'isang kumikislap' > Maliit na bituin * p >
div >

Ngayon, tingnan ang seksyon ng CSS upang i-istilo ang HTML '

' mga elemento.

Istilo 'text-div' div

.text-div {
lapad: 400px;
margin: kotse;
kulay ng background: rgb ( 42 , 49 , 49 ) ;
padding: 8px;
}

Ang ' .text-div Ang ” ay ginagamit para ma-access ang

element. Sa loob ng mga kulot na bracket, ang mga sumusunod na katangian ng CSS ay inilalapat sa '.text-div':

• “ lapad ' inaayos ng property ang lapad ng elemento.
• “ margin ” nagdaragdag ng espasyo sa paligid ng elemento.
• “ kulay ng background ” nagtatakda ng kulay ng background.
• “ padding ” gumagawa ng espasyo sa loob ng hangganan ng elemento.

Istilo ang klase na 'flashing'.

. kumikislap {
kulay: dilaw;
laki ng font: 40px;
font-family: cursive;
font-weight: bold;
animation: flashing-style 0.6s linear infinite;
}

Ang ' . kumikislap Ang ” ay ginagamit upang ma-access ang HTML

tags. Ang mga sumusunod na katangian ay ipinatupad sa klase na ito:

• “ bigat ng font ” ay nagpapahiwatig ng kapal ng font.
• Ang iba pang mga katangian ay ipinaliwanag sa seksyon sa itaas.

Ilapat ang '@keyframe rule' sa 'flashing-style' na animation

@ keyframes flashing-style {
0 % {
opacity: 0 ;
}
}

Ayusin ang pag-uugali ng ' flashing-style ” animation gamit ang “ @keyframe ” mga tuntunin. Sa simula ng animation, magiging 0 ang opacity ng text, na nagsasaad ng kumpletong antas ng transparency ng mga elemento.

Upang gawin ang animation sa pangalawang '

' bahagyang naiiba ang elemento, ang klase ' isa ” ay ipinahayag sa mga sumusunod na istilo ng animation:

Istilo ang 'isang' klase

.isa {
animation: one 1s linear infinite;
}
@ keyframes isa {
limampu % {
opacity: 0 ;
}
}

Output

Epektibo naming natutunan kung paano gawin ang kumikislap na teksto gamit ang iba't ibang katangian ng CSS styling.

Konklusyon

Sa HTML, maraming mga katangian ng CSS ang ginagamit upang gawing kumikislap ang istilo ng teksto. Ang ' animation 'at' opacity ” Ang mga katangian ay karaniwang tinutukoy sa kontekstong ito. Upang ayusin ang kumikislap na gawi, ang ' @keyframe Idineklara ang panuntunan para sa isang animation property. Ipinaliwanag ng artikulong ito kung paano gumawa ng kumikislap o kumikislap na teksto sa HTML gamit ang CSS.