So erstellen Sie blinkenden/blinkenden Text mit CSS

”-Element, um eine Überschrift zwischen dem div-Element anzugeben:

---

---

< div Klasse = 'Blink-Stil' >
< h3 > Linux h3 >
div >

Fahren wir mit dem Styling der HTML-Elemente fort.

Stil „Blink-Stil“ div

.Blink-Stil {
Hintergrund: rgb ( 0 , 0 , 0 ) ;
}

Das CSS „ Hintergrund ”-Eigenschaft wird auf das div-Element mit der Klasse „ Blink-Stil “.

Stil „h3“-Element

h3 {
Textausrichtung: Mitte;
Schriftfamilie: Verdana;
Farbe: #ffc310;
Animation: Blinktext 1,9s linear unendlich;
Schriftgröße: 6em;
}

Der HTML-Code „

”-Element wird mit den folgenden CSS-Eigenschaften dekoriert:

• „ Textausrichtung ”-Eigenschaft legt die Ausrichtung des Texts des Elements fest.
• „ Schriftfamilie “ definiert einen Schriftstil für den Text.
• „ Farbe “ wird verwendet, um den Text des Elements einzufärben.
• „ Animation ” ist die abgekürzte Eigenschaft, die den Animationsnamen, die Animationsdauer, die Animation-Timing-Funktion und die Eigenschaftswerte für die Animation-Iteration-Count angibt.
• „ Schriftgröße ”-Eigenschaft passt die Schriftgröße hauptsächlich in „px“- und „em“-Einheiten an.

Wenden Sie die „@keyframe-Regel“ auf die „Blinktext“-Animation an

@ Keyframes Blinktext {
0 % {
Opazität: 0 ;
}
fünfzig % {
Opazität: einer ;
}
100 % {
Opazität: 0 ;
}

Der Animationsname „ Blinktext “ ist in der Animationseigenschaft angegeben. Die ' @keyframe “-Regel wird vor dem Animationsnamen hinzugefügt, der das Animationsverhalten in verschiedenen Intervallen angibt, wie unten erwähnt:

• Bei ' 0% ”-Animation wird die Textdeckkraft auf 0 gesetzt.
• Bei ' fünfzig% ”-Animation wird die Textdeckkraft auf 1 gesetzt.
• Bei ' 100% ”-Animation wird die Textdeckkraft auf 0 gesetzt.

Ausgabe

Beispiel 2: Erstellen mehrerer blinkender Texte

Führen Sie die folgenden Schritte aus, um mehrere blinkende Texte im HTML-Code zu erstellen:

• Platzieren Sie zuerst ein „
  „Element und ihm eine Klasse zuweisen“ Text-div “.
• Fügen Sie dann zwei „

  ”-Elemente, um Text einzuschließen.

• Dem ersten „

  “-Element wird eine Klasse „ blinkt “.

• Dem zweiten werden zwei Klassen zugeteilt, „ blinkt ' und ' einer “. Auf beide Klassen wird im CSS zugegriffen, um Styling-Eigenschaften zu deklarieren:

< div Klasse = 'text-div' >
< p Klasse = 'blinken' > Funkel funkel p >
< p Klasse = 'blinkend' > Kleiner Stern * p >
div >

Schauen Sie sich jetzt den CSS-Abschnitt an, um den HTML-Code zu formatieren.

„Elemente.

Stil „text-div“ div

.text-div {
Breite: 400px;
Marge: Auto;
Hintergrundfarbe: rgb ( 42 , 49 , 49 ) ;
Polsterung: 8px;
}

Die ' .text-div “ wird verwendet, um auf das

-Element zuzugreifen. Innerhalb der geschweiften Klammern werden die folgenden CSS-Eigenschaften auf die „.text-div“ angewendet:

• „ Breite ”-Eigenschaft passt die Breite des Elements an.
• „ Rand “ fügt Raum um das Element hinzu.
• „ Hintergrundfarbe “ legt die Hintergrundfarbe fest.
• „ Polsterung “ erzeugt Raum innerhalb der Begrenzung des Elements.

Stil 'flashing'-Klasse

.blinkt {
Farbe Gelb;
Schriftgröße: 40px;
Schriftfamilie: kursiv;
Schriftdicke: fett;
Animation: blinkender Stil 0,6 s linear unendlich;
}

Die ' .blinkt “ wird verwendet, um auf die HTML-

-Tags zuzugreifen. Die folgenden Eigenschaften sind in dieser Klasse implementiert:

• „ Schriftstärke “ gibt die Dicke der Schrift an.
• Andere Eigenschaften werden im obigen Abschnitt erläutert.

Wenden Sie die „@keyframe-Regel“ auf die Animation im „blinkenden Stil“ an

@ Keyframes blinken-Stil {
0 % {
Opazität: 0 ;
}
}

Passen Sie das Verhalten von „ blinkender Stil ” Animation mit dem “ @keyframe ' Regeln. Zu Beginn der Animation ist die Textopazität 0, was die vollständige Transparenzstufe der Elemente anzeigt.

Um die Animation auf dem zweiten zu machen “

„Element etwas anders, die Klasse“ einer “ wird mit den folgenden Animationsstilen deklariert:

Stil „eine“ Klasse

.einer {
Animation: eine 1s linear unendlich;
}
@ Keyframes ein {
fünfzig % {
Opazität: 0 ;
}
}

Ausgabe

Wir haben effektiv gelernt, wie man den blinkenden Text mit verschiedenen CSS-Stileigenschaften erstellt.

Fazit

In HTML werden mehrere CSS-Eigenschaften verwendet, um den Textstil blinken zu lassen. Die ' Animation ' und ' Opazität In diesem Zusammenhang werden üblicherweise Eigenschaften definiert. Um das Blinkverhalten anzupassen, muss die „ @keyframe ”-Regel wird für eine Animationseigenschaft deklariert. Dieser Artikel hat erklärt, wie man mit CSS blinkenden oder blinkenden Text in HTML erstellt.