Hvordan lage blinkende/blinkende tekst med CSS
Mens de utvikler en webapplikasjon, har utviklerne alltid en tendens til å implementere CSS -stylingegenskapene effektivt. CSS gir flere stylingegenskaper, for eksempel farge, plassering, justeringer og mange flere. I tillegg til disse egenskapene, tillater det oss å sette animasjonsaksjonen på elementer. For dette formålet, "@KeyFrames”Regler vil bli brukt.
Denne artikkelen vil demonstrere hvordan vi kan lage blinkende/blinkende tekst med CSS.
Hvordan lage blinkende tekst med CSS?
For å få teksten til å blinke, CSS “Opacitet”Eiendom med“@KeyFrames”Regel kan brukes. Sjekk ut eksemplene nedenfor.
Eksempel 1: Lag blinkende tekst
I HTML, legg til en "”Element, og tilordne det et“Blink-stil”Klasse. Neste, legg til en " Linuxhint La oss gå videre for å style HTML -elementene. Stil “blink-stil” div CSS “bakgrunn”Eiendom brukes på DIV -elementet med klassen“Blink-stil”. Stil “H3” -element HTML “ Bruk “@KeyFrame Rule” på “Blink-Text” -animasjon Animasjonsnavnet "blink-tekst”Er spesifisert i animasjonseiendommen. “@KeyFrame”Regel legges til før animasjonsnavnet som betegner animasjonsatferden med forskjellige intervaller som nevnt nedenfor: Produksjon Eksempel 2: lage flere blinkende tekst For å lage flere blinkende tekster i HTML, følg de undergitte trinnene: ”Element er tildelt en klasse”blinkende”. Glimt glimt Liten stjerne * Nå, sjekk ut CSS -delen for å style HTML “ Stil “Text-Div” Div “.tekst-div”Brukes til å få tilgang til elementet. Innenfor de krøllete parentesene brukes følgende CSS -egenskaper på ".tekst-div ”: Stil "blinkende" klasse “.blinkende”Brukes til å få tilgang til HTML Tagger. Følgende egenskaper implementeres i denne klassen: Bruk “@KeyFrame Rule” på "blinkende stil" -animasjon Justere oppførselen til “blinkende stil”Animasjon ved hjelp av“@KeyFrame”Regler. I starten av animasjonen vil teksten opacitet være 0, noe som indikerer elementenees komplette gjennomsiktighetsnivå. Å lage animasjonen på den andre “”Element litt annerledes, klassen”en”Erklæres med følgende animasjonsstiler: Stil “én” klasse Produksjon Vi har effektivt lært hvordan du lager den blinkende teksten ved å bruke forskjellige CSS -stylingegenskaper. Konklusjon I HTML brukes flere CSS -egenskaper for å få tekststilen til å blinke. “animasjon”Og“Opacitet”Egenskaper er ofte definert i denne sammenhengen. For å justere den blinkende oppførselen, “@KeyFrame”Regel er erklært for en animasjonseiendom. Denne artikkelen har forklart hvordan du lager blinkende eller blinkende tekst i HTML ved hjelp av CSS. .blink-stil
Bakgrunn: RGB (0, 0, 0);H3
tekst-align: sentrum;
Font-Family: Verdana;
Farge: #FFC310;
Animasjon: Blink-Text 1.9S lineær uendelig;
Fontstørrelse: 6em;
@KeyFrames blink-text
0%
Opacitet: 0;
50%
Opacitet: 1;
100%
Opacitet: 0;
.tekst-div
Bredde: 400px;
Margin: Auto;
bakgrunnsfarge: RGB (42, 49, 49);
polstring: 8px;
.blinkende
Farge: gul;
Font-størrelse: 40px;
Font-family: Cursive;
Fontvekt: fet;
Animasjon: blinkende stil 0.6S lineær uendelig;
@KeyFrames Flashing-stil
0%
Opacitet: 0;.en
Animasjon: Én 1S lineær uendelig;
@KeyFrames en
50%
Opacitet: 0;