Vi bruker den blinkende teksten når vi ønsker å få oppmerksomheten til publikum. Det hjelper mye å få oppmerksomheten til brukeren når vi har en viktig informasjon eller en ny oppdatering om noe for brukeren. Vi bruker den blinkende teksten, så når brukerne bruker nettstedene eller går gjennom en hvilken som helst side der han/hun vil få oppdateringen uten å kaste bort tiden sin på å søke, får han/hun oppdateringen eller viktig informasjon enkelt hvis det er en blinking Tekst på den siden. Som vi kan se på shoppingnettstedene, når det er noe salg eller noe rabatt eller noe nytt på det nettstedet, oppretter de denne informasjonen i den blinkende tekstskjemaet. Å få teksten til å blinke vil lett få brukerens oppmerksomhet mot den informasjonen. Den blinkende teksten er noe som blekner sakte ut i noen sekunder og deretter kommer tilbake til originalteksten. Vi vil forklare hvordan du legger til den blinkende teksten ved hjelp av CSS i denne opplæringen.

Eksempel 1

For å få teksten til å blinke, må vi lage en HTML -fil og skrive litt tekst på den. Vi legger til den blinkende effekten på denne teksten ved hjelp av CSS -egenskapene.

I HTML -koden skrev vi en enkelt linje inne i “Div” som overskrift 2 “H2” og bruker egenskapene til CSS for å gjøre denne teksten til en blinkende tekst. Se CSS -koden nedenfor, så vet du hvordan du legger til den blinkende effekten ved hjelp av CSS -egenskapene.

CSS -kode:

Vi setter kroppen "margin" og "polstring" til "0". Så bruker vi den absolutte senterposisjonen på “Div”. Vi setter "posisjonen" -egenskapen til "absolutt". Vi setter "toppen" og "venstre" til "50%". Så kommer "Transform-Translate" -egenskapen til CSS som transformerer teksten tilbake til halvparten av bredden og høyden. Den brukes til å snu teksten til “50%” tilbake til halvparten av bredden og “50%” tilbake til halvparten av høyden.

Etter dette bruker vi stylingegenskapene til CSS for å endre stilen til “H2”. Vi setter skriftstørrelsen på “H2” til “5em” og “Font-Family” til “Serif”. Fargen vi velger for dette er den "grønne" fargen og koden for dette er "#008000". Denne overskriften er på linje i "senteret". Hovedelementet er å legge til "animasjon" -egenskapen på denne "H2". Denne "animasjon" -egenskapen er satt til å animere for “2.0sec ”og“ lineær uendelig ”. Den lineære uendelig brukes, slik at denne animasjonen starter sakte og transformeres deretter til litt raskere. "@Keyframe" -velgeren brukes til å gi den blinkende teksten sammen med opacitetsverdien. Vi setter opacitetsverdien på slutten av CSS -koden.

Produksjon:

Teksten vises i følgende video. Når du kjører den forrige koden som er gitt, vil du se at teksten du har skrevet i HTML -filen din blinker. Spill denne videoen, og du kan se at teksten blinker.

Videospillerhttps: // linuxhint.COM/WP-Content/Uploads/2022/06/Document-Profile-1-Microsoft -Edge-2022-05-30-23-46-47.MP400: 0000: 0000: 06 Bruk opp/ned piltastene for å øke eller redusere volumet.

Eksempel nr. 2

Vi skal demonstrere en annen kode her, slik at du enkelt lærer dette konseptet med blinkende tekst i CSS.

Vi bruker "Span" -klassen her og setter navnet til "Blinking". Vi skriver en enkel linje her som er "er jeg blinkende" og bruker den blinkende effekten på denne teksten ved hjelp av CSS -animasjonsegenskapen.

CSS -kode:

Først setter vi teksten til den absolutte senterposisjonen, noe som betyr at teksten vil vises i midten av skjermen. Her kan du se at "posisjonen" er "absolutt". “Topp” og “bunn” er satt til “50%” og “Transform-Translate” -egenskapen er satt til “-50%, -50%”. Vi bruker klassenavnet "Span" som er "Blinking". Og bruk stilen og "animasjon" -effekten på teksten. Vi setter "fontstørrelse" av denne teksten til "4em". "Font-Family" vi bruker for denne teksten er satt til "Algerie".

Fargen på teksten er satt til “grønn”. Tekstjusteringen er satt til "sentrum" på skjermen. Egenskapen "animasjon" bruker den blinkende effekten på teksten. Den blinkende teksten animerer for “2.0s ”og“ uendelig ”. "@Keyframes" er å gi fargen opacitet til den blinkende teksten. Sett den først til “0%” og “49%” for den "svarte" fargen. "60%" er satt til den gjennomsiktige fargen, "99%" gjennomsiktig og "100%" svart. Utgangen vises i følgende video.

Produksjon:

I denne gitte videoen vil du legge merke til at teksten blinker. Denne gitte utgangen er gjengitt i nettleseren. Den blinkende teksten får oppmerksomheten til brukeren.

Videospillerhttps: // linuxhint.COM/WP-Content/Uploads/2022/06/Document-Profile-1-Microsoft -Edge-2022-05-30-23-46-47.MP400: 0000: 0000: 06 Bruk opp/ned piltastene for å øke eller redusere volumet.

Eksempel nr. 3

I dette eksemplet skriver vi avsnittene i HTML -koden og bruker "animasjon" -egenskapen på disse avsnittene slik at avsnittene blinker når vi får utdataene.

Her har vi overskriften 1 “

”Hvor vi skriver overskriften vi vil vise. Deretter lager vi en klasse som heter “A1” av “P” og skriver et avsnitt i den. Vi oppretter også et annet avsnitt ved å bruke klassenavnet "A2" av en annen "P". Vi gir disse navnene til "P" -klassen slik at vi kan bruke dem i CSS -koden for styling.

CSS -kode:

Først bruker vi stilen på overskriften. Vi bruker den "oransje" fargen for skriften eller teksten skrevet i overskriften. Overskriften er "justert" til "sentrum" av utgangsskjermen. Familien til teksten eller skrifttypen er satt til “Algerie”, slik at overskriften vises i “Algerisk” -stil. Vi animerer teksten slik at avsnittet blinker på skjermen. Vi bruker den samme egenskapen som vi bruker i vårt forrige eksempel for å få teksten til å blinke. Denne egenskapen er "animasjon" -egenskapen. Den animerer eller blinker for “2s” (to sekunder).

Størrelsen på teksten i avsnittet er “25px”. Disse avsnittene er tilpasset "senteret". Teksten til avsnittet er satt til "kursiv". Igjen har vi "@keyframe" som vi forklarte i våre tidligere eksempler. Se på den gitte videoen for utgangen av dette eksemplet.

Produksjon:

Videospillerhttps: // linuxhint.COM/WP-Content/Uploads/2022/06/Document-Profile-1-Microsoft -Edge-2022-05-30-23-46-47.MP400: 0000: 0000: 06 Bruk opp/ned piltastene for å øke eller redusere volumet.

I den forrige videoen kan du se at overskriftsteksten ikke blinker fordi vi ikke brukte den blinkende effekten eller animasjonsegenskapen på overskriften. Dette er grunnen til at overskriften er i fortsatt form. Men avsnittene under overskriften blink og stilen til disse avsnittene er forskjellige fra overskriften.

Konklusjon

I denne opplæringen forklarte vi den blinkende effekten i CSS og anvendte denne blinkende effekten på teksten vår ved hjelp av CSS “Animation” -egenskapen. Denne blinkende teksten brukes til å få brukerens oppmerksomhet. Du vil kanskje legge merke til at når teksten blinker, beveger øynene våre automatisk mot den teksten. I denne opplæringen ga vi videoene av den blinkende teksten. Etter å ha sett disse videoutgangene, vil du forstå hva blink betyr. Du lærer hvordan teksten blinker og hvordan vi bruker "animasjon" -egenskapen, og angir tid for å blinke i teksten for å få teksten til å blinke etter en grundig studie av denne opplæringen.