Knipperende/knipperende tekst maken met CSS

”-element om een ​​kop tussen het div-element op te geven:

---

---

< div klas = 'knipper-stijl' >
< h3 > Linux h3 >
div >

Laten we verder gaan met het stylen van de HTML-elementen.

Stijl 'knipper-stijl' div

.blink-stijl {
achtergrond: RGB ( 0 , 0 , 0 ) ;
}

De CSS “ achtergrond ” eigenschap wordt toegepast op het div-element met de klasse “ blink-stijl ”.

Stijl 'h3'-element

h3 {
tekst uitlijnen: centreren;
font-familie: Verdana;
kleur: #ffc310;
animatie: knipperende tekst 1.9s lineair oneindig;
lettergrootte: 6em;
}

De HTML “

”-element is versierd met de volgende CSS-eigenschappen:

• “ tekst uitlijnen ” eigenschap stelt de uitlijning van de tekst van het element in.
• “ font-familie ” definieert een lettertypestijl voor de tekst.
• “ kleur ” wordt gebruikt om de tekst van het element te kleuren.
• “ animatie ” is de steno-eigenschap die de animatienaam, animatieduur, animatie-timingfunctie en animatie-iteratie-telling eigenschapswaarden specificeert.
• “ lettertypegrootte ” eigenschap past de lettergrootte voornamelijk aan in “px” en “em” eenheden.

Pas '@keyframe-regel' toe op 'knipperende tekst' -animatie

@ sleutelframes blink-tekst {
0 % {
ondoorzichtigheid: 0 ;
}
vijftig % {
ondoorzichtigheid: een ;
}
100 % {
ondoorzichtigheid: 0 ;
}

De naam van de animatie ' blink-tekst ” is opgegeven in de animatie-eigenschap. De ' @sleutelframe ” regel wordt toegevoegd vóór de animatienaam die het animatiegedrag op verschillende intervallen aangeeft, zoals hieronder vermeld:

• Bij ' 0% ”-animatie, wordt de tekstdekking ingesteld op 0.
• Bij ' vijftig% ”-animatie, wordt de tekstdekking ingesteld op 1.
• Bij ' 100% ” animatie, tekstdekking is ingesteld op 0.

Uitgang

Voorbeeld 2: Meerdere knipperende tekst maken

Volg de onderstaande stappen om meerdere knipperende teksten in de HTML te maken:

• Plaats eerst een '
  'element en wijs het een klasse toe' tekst-div ”.
• Voeg vervolgens twee '

  ”-elementen om wat tekst op te nemen.

• Het eerste “

  ” element krijgt een klasse “ knipperend ”.

• De tweede krijgt twee klassen toegewezen, “ knipperend ' en ' een ”. Beide klassen zijn toegankelijk in de CSS om stylingeigenschappen te declareren:

< div klas = 'tekst-div' >
< p klas = 'knipperend' > Twinkel Twinkel p >
< p klas = 'knipperende' > Kleine ster * p >
div >

Bekijk nu de CSS-sectie om de HTML op te maken '

” elementen.

Stijl “tekst-div” div

.tekst-div {
breedte: 400px;
marge: automatisch;
achtergrondkleur: rgb ( 42 , 49 , 49 ) ;
opvulling: 8px;
}

De ' .tekst-div ” wordt gebruikt om toegang te krijgen tot het

-element. Binnen de accolades worden de volgende CSS-eigenschappen toegepast op de '.text-div':

• “ breedte ” eigenschap past de breedte van het element aan.
• “ marge ” voegt ruimte toe rond het element.
• “ Achtergrond kleur ” stelt de achtergrondkleur in.
• “ opvulling ” produceert ruimte binnen de grens van het element.

Stijl 'knipperende' klasse

.knipperend {
kleur geel;
lettergrootte: 40px;
font-familie: cursief;
font-weight: vet;
animatie: knipperende stijl 0.6s lineair oneindig;
}

De ' .knipperend ” wordt gebruikt om toegang te krijgen tot de HTML

-tags. De volgende eigenschappen zijn geïmplementeerd in deze klasse:

• “ lettertype dikte ” geeft de dikte van het lettertype aan.
• Andere eigenschappen worden uitgelegd in het bovenstaande gedeelte.

Pas '@keyframe-regel' toe op animatie in 'knipperende stijl'.

@ keyframes knipperende stijl {
0 % {
ondoorzichtigheid: 0 ;
}
}

Pas het gedrag aan van “ knipperende stijl ” animatie met behulp van de “ @sleutelframe ' reglement. Aan het begin van de animatie is de tekstdekking 0, wat het volledige transparantieniveau van de elementen aangeeft.

Om de animatie op de tweede te maken '

” element iets anders, de klasse “ een ” wordt gedeclareerd met de volgende animatiestijlen:

Stijl 'één' klasse

.een {
animatie: één 1s lineair oneindig;
}
@ sleutelframes een {
vijftig % {
ondoorzichtigheid: 0 ;
}
}

Uitgang

We hebben effectief geleerd hoe we de knipperende tekst kunnen maken met behulp van verschillende CSS-stijleigenschappen.

Gevolgtrekking

In HTML worden verschillende CSS-eigenschappen gebruikt om de tekststijl te laten knipperen. De ' animatie ' en ' ondoorzichtigheid ” eigenschappen worden in deze context gewoonlijk gedefinieerd. Om het knippergedrag aan te passen, de ' @sleutelframe ”-regel wordt gedeclareerd voor een animatie-eigenschap. In dit artikel is uitgelegd hoe je met CSS knipperende of knipperende tekst in HTML kunt maken.