So erstellen Sie mit CSS Blinking/Blinking -Text
Während der Entwicklung einer Webanwendung neigen die Entwickler immer dazu, die CSS -Styling -Eigenschaften effektiv zu implementieren. CSS liefert mehrere Styling -Eigenschaften wie Farbe, Position, Ausrichtungen und vieles mehr. Zusätzlich zu diesen Eigenschaften ermöglicht es uns, die Animationsaktion auf Elementen festzulegen. Zu diesem Zweck die “@keyframeS”Regeln werden verwendet.
Dieser Artikel zeigt, wie wir mit CSS Blinking/Blinking -Text machen können.
Wie man blinkende Text mit CSS macht?
Um den Text zu blinken, das CSS “OpazitätEigentum mit dem "@keyframes”Regel kann angewendet werden. Schauen Sie sich die folgenden Beispiele an.
Beispiel 1: Machen Sie blinkendes Text
In HTML fügen Sie eine "hinzu"Element, und zuweisen Sie es eine “Blinkstil" Klasse. Als nächstes fügen Sie eine "hinzu" LinuxHint Lassen Sie uns die HTML -Elemente stylen. Stil „Blink-Stil“ Div Das CSS “Hintergrund"Eigenschaft wird mit der Klasse auf das DIV -Element angewendet"Blinkstil”. Stil „H3“ Element Die HTML " Wenden Sie "@KeyFrame Rule" auf "Blink-Text" -Animation an Der Animationsname “Blink-Text”Wird in der Animationseigenschaft angegeben. Der "@keyframe”Regel wird vor dem Animationsnamen hinzugefügt, der das Animationsverhalten in unterschiedlichen Intervallen bedeutet, wie unten erwähnt: Ausgang Beispiel 2: Multiple Blinking Text machen Befolgen Sie die folgenden Schritte, um mehrere blinkende Texte in der HTML zu erstellen: "Element wird eine Klasse zugewiesen"blinken”. Funkel funkel Kleiner Stern * Schauen Sie sich nun den CSS -Abschnitt an, um die HTML zu stylen. “ Stil „Text-div“ div Der ".Text-div”Wird verwendet, um auf das Element zuzugreifen. Innerhalb der lockigen Klammern werden die folgenden CSS -Eigenschaften auf das angewendet.Text-div ”: Stil „blinkender“ Klasse Der ".blinken”Wird verwendet, um auf die HTML zuzugreifen Stichworte. Die folgenden Eigenschaften werden in dieser Klasse implementiert: Wenden Sie "@KeyFrame Rule" auf die Animation im Blitzstil an Das Verhalten von “anpassenblinkendes Stil"Animation mit der"@keyframe" Regeln. Zu Beginn der Animation beträgt die Deckkraft von Text 0, was die vollständige Transparenzstufe der Elemente angibt. Die Animation in der zweiten zu machen “"Element etwas anders, die Klasse"eins”Wird mit den folgenden Animationsstilen deklariert: Stil „eine“ Klasse Ausgang Wir haben effektiv gelernt, wie man den blinkenden Text mit verschiedenen CSS -Styling -Eigenschaften macht. Abschluss In HTML werden mehrere CSS -Eigenschaften verwendet, um den Textstil zu blinken. Der "Animation" Und "OpazitätEigenschaften werden in diesem Zusammenhang allgemein definiert. Um das blinkende Verhalten anzupassen, das “@keyframeDie Regel wird für eine Animationseigenschaft deklariert. In diesem Artikel wurde erklärt. .Blinkstil
Hintergrund: RGB (0, 0, 0);H3
Text-Align: Mitte;
Schriftfamilie: Verdana;
Farbe: #ffc310;
Animation: Blink-Text 1.9S linear unendlich;
Schriftgröße: 6EM;
@keyframes blink-text
0%
Deckkraft: 0;
50%
Deckkraft: 1;
100%
Deckkraft: 0;
.text-div
Breite: 400px;
Rand: Auto;
Hintergrundfarbe: RGB (42, 49, 49);
Polsterung: 8px;
.blinken
Farbe Gelb;
Schriftgröße: 40px;
Schriftfamilie: Kursiv;
Schriftdicke: fett;
Animation: Blitzstil 0.6S linear unendlich;
@keyframes blinkstil
0%
Deckkraft: 0;.eins
Animation: Ein 1s linear unendlich;
@keyframes eins
50%
Deckkraft: 0;