Ako vytvoriť blikajúci / blikajúci text pomocou CSS

” na určenie nadpisu medzi prvkom div:

---

---

< div trieda = 'štýl žmurkania' >
< h3 > Linux h3 >
div >

Prejdime k štýlu prvkov HTML.

Štýl „štýl žmurkania“ div

.štýl žmurkania {
pozadie: rgb ( 0 , 0 , 0 ) ;
}

CSS ' pozadie vlastnosť ' sa aplikuje na prvok div s triedou ' v štýle blikania “.

Prvok štýlu „h3“.

h3 {
text-align: center;
rodina fontov: Verdana;
farba: #ffc310;
animácia: blikajúci text 1,9s lineárny nekonečný;
veľkosť písma: 6em;
}

HTML '

” prvok zdobia nasledujúce vlastnosti CSS:

• “ zarovnanie textu vlastnosť nastavuje zarovnanie textu prvku.
• “ font-family “ definuje štýl písma pre text.
• “ farba “ sa používa na zafarbenie textu prvku.
• “ animácie ” je skrátená vlastnosť, ktorá špecifikuje názov animácie, trvanie animácie, funkciu časovania animácie a hodnoty vlastností počtu iterácií animácie.
• “ veľkosť písma Vlastnosť ” upravuje veľkosť písma hlavne v jednotkách „px“ a „em“.

Použite „pravidlo @keyframe“ na animáciu „blink-text“.

@ blikajúci text kľúčových snímok {
0 % {
nepriehľadnosť: 0 ;
}
päťdesiat % {
nepriehľadnosť: jeden ;
}
100 % {
nepriehľadnosť: 0 ;
}

Názov animácie ' blikajúci text ” je špecifikované vo vlastnosti animation. ' @keyframe “ sa pred názov animácie pridá pravidlo, ktoré označuje správanie animácie v rôznych intervaloch, ako je uvedené nižšie:

• o „ 0% “, nepriehľadnosť textu je nastavená na 0.
• o „ päťdesiat percent ” animácie, nepriehľadnosť textu je nastavená na 1.
• o „ 100% ” animácie, nepriehľadnosť textu je nastavená na 0.

Výkon

Príklad 2: Vytváranie viacnásobného blikajúceho textu

Ak chcete v HTML vytvoriť viacero blikajúcich textov, postupujte podľa nižšie uvedených krokov:

• Najprv umiestnite „
  prvok a priraďte mu triedu text-div “.
• Potom pridajte dve „

  ” prvky na zahrnutie nejakého textu.

• Prvý prvok „

  “ má priradenú triedu „ blikanie “.

• Druhá má pridelené dve triedy, “ blikanie “ a „ jeden “. Obe triedy sú prístupné v CSS na deklarovanie vlastností štýlu:

< div trieda = 'text-div' >
< p trieda = 'blikanie' > Twinkle Twinkle p >
< p trieda = 'blikajúca jedna' > Malá hviezda * p >
div >

Teraz si pozrite sekciu CSS a upravte štýl HTML “

“prvky.

Štýl „text-div“ div

.text-div {
šírka: 400px;
marža: auto;
farba pozadia: rgb ( 42 , 49 , 49 ) ;
výplň: 8px;
}

' .text-div ” sa používa na prístup k prvku

. V zložených zátvorkách sa na „.text-div“ použijú nasledujúce vlastnosti CSS:

• “ šírka vlastnosť upraví šírku prvku.
• “ marža “ pridáva priestor okolo prvku.
• “ farba pozadia ” nastaví farbu pozadia.
• “ vypchávka “ vytvára priestor v rámci hranice prvku.

Trieda štýlu „blikanie“.

.blikanie {
farba: žltá;
veľkosť písma: 40px;
font-family: kurzíva;
font-weight: bold;
animácia: v štýle blikania 0,6s lineárna nekonečná;
}

' .blikanie ” sa používa na prístup k HTML značkám

. V tejto triede sú implementované nasledujúce vlastnosti:

• “ font-weight “ označuje hrúbku písma.
• Ďalšie vlastnosti sú vysvetlené vo vyššie uvedenej časti.

Použite „pravidlo @keyframe“ na animáciu „v štýle blikania“.

@ kľúčové snímky v štýle blikania {
0 % {
nepriehľadnosť: 0 ;
}
}

Upravte správanie „ blikajúcim štýlom “ animácia pomocou “ @keyframe “ pravidlá. Na začiatku animácie bude nepriehľadnosť textu 0, čo znamená úplnú úroveň priehľadnosti prvkov.

Ak chcete urobiť animáciu na druhom '

“prvok mierne odlišný, trieda” jeden “ je deklarovaný s nasledujúcimi štýlmi animácie:

Štýl „jedna“ trieda

.jeden {
animácia: jedna 1s lineárne nekonečno;
}
@ kľúčové snímky jeden {
päťdesiat % {
nepriehľadnosť: 0 ;
}
}

Výkon

Efektívne sme sa naučili, ako vytvoriť blikajúci text pomocou rôznych vlastností štýlu CSS.

Záver

V HTML sa na blikanie štýlu textu používa niekoľko vlastností CSS. ' animácie “ a „ nepriehľadnosť “ vlastnosti sú v tomto kontexte bežne definované. Ak chcete upraviť správanie blikania, „ @keyframe ” pravidlo je deklarované pre vlastnosť animácie. Tento článok vysvetľuje, ako vytvoriť blikajúci alebo blikajúci text v HTML pomocou CSS.