Sådan laver du blinkende/blinkende tekst med CSS

'-element for at angive en overskrift mellem div-elementet:

---

---

< div klasse = 'blink-stil' >
< h3 > Linux h3 >
div >

Lad os gå videre til styling af HTML-elementerne.

Stil 'blink-stil' div

.blink-stil {
baggrund: rgb ( 0 , 0 , 0 ) ;
}

CSS ' baggrund egenskaben anvendes på div-elementet med klassen ' blink-stil ”.

Stil 'h3' Element

h3 {
tekst-align: center;
skrifttype-familie: Verdana;
farve: #ffc310;
animation: blink-tekst 1.9s lineær uendelig;
skriftstørrelse: 6em;
}

HTML '

”-elementet er dekoreret med følgende CSS-egenskaber:

• “ tekstjustering egenskaben indstiller justeringen af ​​elementets tekst.
• “ skrifttype-familie ” definerer en skrifttype for teksten.
• “ farve ” bruges til at farve elementets tekst.
• “ animation ” er den stenografiske egenskab, der specificerer animationsnavnet, animationens varighed, animation-timing-funktionen og animation-iteration-count egenskabsværdier.
• “ skriftstørrelse ” egenskab justerer skriftstørrelsen hovedsageligt i “px” og “em” enheder.

Anvend '@keyframe rule' på 'blink-text'-animation

@ keyframes blink-tekst {
0 % {
Gennemsigtighed: 0 ;
}
halvtreds % {
Gennemsigtighed: en ;
}
100 % {
Gennemsigtighed: 0 ;
}

Animationens navn ' blink-tekst ” er angivet i animationsegenskaben. Det ' @keyframe ” regel tilføjes før animationsnavnet, der angiver animationsadfærden med forskellige intervaller som nævnt nedenfor:

• ved ' 0 % ” animation, er tekstopaciteten sat til 0.
• ved ' halvtreds% ” animation, er tekstopaciteten sat til 1.
• ved ' 100 % ” animation, tekstopacitet er sat til 0.

Produktion

Eksempel 2: Lav flere blinkende tekst

Følg nedenstående trin for at lave flere blinkende tekster i HTML:

• Placer først en '
  ' element og tildel det en klasse ' tekst-div ”.
• Tilføj derefter to '

  ”-elementer for at inkludere noget tekst.

• Det første '

  '-element er tildelt en klasse ' blinkende ”.

• Den anden er tildelt to klasser, ' blinkende ' og ' en '. Begge klasser er tilgået i CSS for at erklære stilegenskaber:

< div klasse = 'tekst-div' >
< s klasse = 'blinker' > Twinkle Twinkle s >
< s klasse = 'blinkende en' > Lille stjerne * s >
div >

Tjek nu CSS-sektionen for at style HTML '

' elementer.

Stil 'tekst-div' div

.tekst-div {
bredde: 400px;
margin: bil;
baggrundsfarve: rgb ( 42 , 49 , 49 ) ;
polstring: 8px;
}

Det ' .tekst-div ” bruges til at få adgang til

-elementet. Inden for de krøllede parenteser anvendes følgende CSS-egenskaber på '.text-div':

• “ bredde ” egenskab justerer elementets bredde.
• “ margen ” tilføjer plads omkring elementet.
• “ baggrundsfarve ” indstiller baggrundsfarven.
• “ polstring ” producerer plads inden for elementets grænse.

Stil 'blinkende' klasse

.blinker {
farve: gul;
skriftstørrelse: 40px;
skrifttype-familie: kursiv;
font-weight: fed;
animation: blinkende stil 0.6s lineær uendelig;
}

Det ' .blinker ” bruges til at få adgang til HTML

-tags. Følgende egenskaber er implementeret i denne klasse:

• “ skrifttype-vægt ” angiver skrifttypens tykkelse.
• Andre egenskaber er forklaret i ovenstående afsnit.

Anvend '@keyframe rule' på 'blinkende' animation

@ keyframes blinkende stil {
0 % {
Gennemsigtighed: 0 ;
}
}

Juster adfærden for ' blinkende stil ' animation ved hjælp af ' @keyframe ” regler. Ved starten af ​​animationen vil tekstopaciteten være 0, hvilket indikerer elementernes fuldstændige gennemsigtighedsniveau.

For at lave animationen på den anden '

' element lidt anderledes, klassen ' en ” er erklæret med følgende animationsstile:

Stil 'én' klasse

.en {
animation: en 1s lineær uendelig;
}
@ keyframes en {
halvtreds % {
Gennemsigtighed: 0 ;
}
}

Produktion

Vi har effektivt lært, hvordan man laver den blinkende tekst ved hjælp af forskellige CSS-stilegenskaber.

Konklusion

I HTML bruges flere CSS-egenskaber til at få tekststilen til at blinke. Det ' animation ' og ' Gennemsigtighed ” egenskaber er almindeligvis defineret i denne sammenhæng. For at justere den blinkende adfærd skal ' @keyframe ” reglen erklæres for en animationsejendom. Denne artikel har forklaret, hvordan man laver blinkende eller blinkende tekst i HTML ved hjælp af CSS.