Kaip sukurti mirksintį / mirksintį tekstą naudojant CSS

“ elementą, kad nurodytumėte antraštę tarp div elemento:

---

---

< div klasė = 'mirksėjimo stilius' >
< h3 > Linux h3 >
div >

Pereikime prie HTML elementų stiliaus.

Stilius „blink-style“ skyr

.mirksėjimo stilius {
fonas: rgb ( 0 , 0 , 0 ) ;
}

CSS“ fone ' ypatybė taikoma div elementui su klase ' mirksėjimo stilius “.

Stilius „h3“ elementas

h3 {
teksto lygiavimas: centre;
šriftų šeima: Verdana;
spalva: #ffc310;
animacija: blink-text 1.9s linijinis begalinis;
šrifto dydis: 6 em;
}

HTML“

“ elementas yra papuoštas šiomis CSS savybėmis:

• “ teksto lygiavimas “ ypatybė nustato elemento teksto lygiavimą.
• “ šrifto šeima “ apibrėžia teksto šrifto stilių.
• “ spalva “ naudojamas elemento tekstui nuspalvinti.
• “ animacija ” yra sutrumpinimo ypatybė, nurodanti animacijos pavadinimą, animacijos trukmę, animacijos laiko funkciją ir animacijos iteracijų skaičiaus ypatybių reikšmes.
• “ šrifto dydis ypatybė koreguoja šrifto dydį daugiausia „px“ ir „em“ vienetais.

Taikykite „@keyframe“ taisyklę „mirksinčio teksto“ animacijai

@ raktiniai kadrai mirksi tekstas {
0 % {
neskaidrumas: 0 ;
}
penkiasdešimt % {
neskaidrumas: vienas ;
}
100 % {
neskaidrumas: 0 ;
}

Animacijos pavadinimas ' mirksėjimo tekstas “ yra nurodyta animacijos ypatybėje. „ @keyframe “ taisyklė pridedama prieš animacijos pavadinimą, nurodantį animacijos elgesį skirtingais intervalais, kaip nurodyta toliau:

• „ 0 % “ animaciją, teksto neskaidrumas nustatytas kaip 0.
• „ penkiasdešimt % “ animaciją, teksto neskaidrumas nustatytas į 1.
• „ 100 % “ animacija, teksto neskaidrumas nustatytas į 0.

Išvestis

2 pavyzdys: kelių mirksinčių tekstų kūrimas

Norėdami sukurti kelis mirksinčius tekstus HTML, atlikite toliau nurodytus veiksmus.

• Pirmiausia įdėkite „
  elementą ir priskirkite jam klasę text-div “.
• Tada pridėkite du '

  “ elementus, kad būtų įtrauktas tekstas.

• Pirmajam „

  “ elementui priskiriama klasė „ mirksi “.

• Antrajam priskiriamos dvi klasės: mirksi “ ir „ vienas “. Abi klasės pasiekiamos CSS, kad būtų galima deklaruoti stiliaus ypatybes:

< div klasė = 'text-div' >
< p klasė = 'mirksi' > Twinkle Twinkle p >
< p klasė = 'mirksi vienas' > Maža žvaigždė * p >
div >

Dabar peržiūrėkite CSS skyrių, kad sukurtumėte HTML stilių “

“ elementai.

Stilius „text-div“ div

.text-div {
plotis: 400 pikselių;
marža: automobilis;
fono spalva: rgb ( 42 , 49 , 49 ) ;
pamušalas: 8px;
}

„ .text-div “ naudojamas norint pasiekti

elementą. Garbanotuose skliaustuose „.text-div“ taikomos šios CSS ypatybės:

• “ plotis “ savybė koreguoja elemento plotį.
• “ marža “ prideda erdvės aplink elementą.
• “ fono spalva “ nustato fono spalvą.
• “ kamšalas “ sukuria erdvę elemento ribose.

Stiliaus „mirksėjimo“ klasė

.mirksi {
spalva: geltona;
šrifto dydis: 40 pikselių;
šriftų šeima: kursyvus;
šrifto svoris: paryškintas;
animacija: mirksinčio stiliaus 0,6 s linijinė begalinė;
}

„ .mirksi “ naudojamas norint pasiekti HTML

žymas. Šioje klasėje įdiegtos šios savybės:

• “ šrifto svoris “ nurodo šrifto storį.
• Kitos savybės paaiškintos aukščiau esančiame skyriuje.

Taikykite „@keyframe“ taisyklę „mirksinčio stiliaus“ animacijai

@ mirksinčio stiliaus raktiniai kadrai {
0 % {
neskaidrumas: 0 ;
}
}

Pakoreguokite elgseną mirksi stiliumi “ animacija naudojant “ @keyframe “ taisyklės. Animacijos pradžioje teksto neskaidrumas bus 0, o tai rodo visišką elementų skaidrumo lygį.

Norėdami sukurti animaciją antroje '

' elementas šiek tiek skiriasi, klasė ' vienas “ yra deklaruojamas naudojant šiuos animacijos stilius:

Stilius „viena“ klasė

.vienas {
animacija: vienas 1s tiesinis begalinis;
}
@ pagrindiniai kadrai vienas {
penkiasdešimt % {
neskaidrumas: 0 ;
}
}

Išvestis

Mes efektyviai išmokome, kaip sukurti mirksintį tekstą naudojant skirtingas CSS stiliaus savybes.

Išvada

HTML, kad teksto stilius mirksėtų, naudojamos kelios CSS ypatybės. „ animacija “ ir „ neskaidrumas “ savybės paprastai apibrėžiamos šiame kontekste. Norėdami sureguliuoti mirksėjimo elgesį, „ @keyframe “ taisyklė deklaruojama animacijos nuosavybei. Šiame straipsnyje paaiškinta, kaip sukurti mirksintį arba mirksintį tekstą HTML naudojant CSS.