Wir verwenden den blinkenden Text, wenn wir die Aufmerksamkeit des Publikums auf sich ziehen möchten. Es hilft sehr, die Aufmerksamkeit des Benutzers zu erregen, wenn wir über wichtige Informationen oder ein neues Update über irgendetwas für den Benutzer verfügen. Wir verwenden den blinkenden Text. Wenn die Benutzer die Websites verwenden oder eine Seite durchlaufen, auf der er/sie das Update erhalten möchte, ohne seine Zeit zu suchen Text auf dieser Seite. Wie wir auf den Einkaufswebsites sehen können, erstellen sie diese Informationen im blinkenden Textformular, wenn es einen Verkauf oder einen Rabatt oder etwas Neues erstellt. Wenn der Text blinkt. Der blinkende Text ist etwas, das einige Sekunden lang langsam verblasst und dann zu seinem ursprünglichen Text zurückkommt. Wir werden erklären, wie Sie den blinkenden Text mit CSS in diesem Tutorial hinzufügen.

Beispiel 1

Um unseren Text zu blinken, müssen wir eine HTML -Datei erstellen und einen Text darauf schreiben. Wir fügen den blinkenden Effekt auf diesen Text mit den CSS -Eigenschaften hinzu.

Im HTML -Code haben wir eine einzige Zeile in „Div“ als Überschrift 2 „H2“ geschrieben und die Eigenschaften von CSS angewendet, um diesen Text zu einem blinkenden Text zu machen. Siehe den CSS -Code unten und Sie werden wissen, wie Sie den Blink -Effekt mit den CSS -Eigenschaften hinzufügen können.

CSS -Code:

Wir setzen den Körper "Rand" und "Polsterung" auf "0". Dann verwenden wir die absolute Mittelposition auf „Div“. Wir setzen die Eigenschaft "Position" auf "Absolute". Wir setzen das "Top" und "links" auf "50%". Dann kommt die Eigenschaft „Transform-Translate“ des CSS, die den Text wieder in die Hälfte seiner Breite und Höhe umwandelt. Es wird verwendet, um den Text auf „50%“ zurück in die Hälfte seiner Breite und „50%“ zurück in die Hälfte seiner Höhe.

Danach verwenden wir die Stylingeigenschaften von CSS, um den Stil des „H2“ zu ändern. Wir setzen die Schriftgröße von „H2“ auf „5EM“ und die „Schriftfamilie“ auf „Serife“. Die Farbe, die wir dafür auswählen, ist die „grüne“ Farbe und der Code hierfür ist "#008000". Diese Überschrift ist im „Mitte“ ausgerichtet. Das Hauptelement besteht darin, die Eigenschaft "Animation" zu diesem "H2" hinzuzufügen. Diese „Animations“ -Regie ist für „2 animieren.0Sec ”und" Linear Infinite ". Das lineare Infinite wird verwendet, sodass diese Animation langsam beginnt und sich dann in etwas schneller verwandelt. Der Selektor "@keyframe" wird verwendet, um den blinkenden Text zusammen mit dem Deckkraftwert bereitzustellen. Wir setzen den Opazitätswert am Ende des CSS -Code.

Ausgang:

Der Text wird im folgenden Video angezeigt. Wenn Sie den vorgegebenen Code ausführen, sehen Sie, dass der in Ihrer HTML -Datei geschriebene Text blinkt. Spielen Sie dieses Video und Sie können sehen, dass der Text blinkt.

Video Playerhttps: // LinuxHint.com/wp-content/uploads/2022/06/document-profile-1-microsoft -Edge-2022-05-30-23-46-47.MP400: 0000: 0000: 06use Up/Down -Pfeiltasten, um das Volumen zu erhöhen oder zu verringern.

Beispiel #2

Wir werden hier einen weiteren Code demonstrieren, damit Sie dieses Konzept des blinkenden Textes in CSS leicht lernen.

Wir verwenden hier die "Span" -Klasse und setzen den Namen auf "Blinken". Wir schreiben hier eine einfache Zeile "Bin ich blinzeln" und verwenden den blinkenden Effekt auf diesen Text mit der CSS -Animationseigenschaft.

CSS -Code:

Zuerst setzen wir den Text auf die absolute Mittelposition, was bedeutet, dass der Text in der Mitte des Bildschirms angezeigt wird. Hier können Sie sehen, dass die „Position“ „absolut“ ist. Das „Obere“ und „unten“ sind auf „50%“ eingestellt und die Eigenschaft „Transform-Translate“ ist auf "-50%, -50%" eingestellt, die auf "-50%" eingestellt sind. Wir verwenden den Klassennamen "Span", der "blinzelt" ist. Und wenden Sie den Effekt des Stils und der Animation auf den Text an. Wir setzen die "Schriftgröße" dieses Textes auf "4EM". Die "Schriftfamilie", die wir für diesen Text verwenden, ist auf "Algerian" gesetzt.

Die Farbe des Textes ist auf "grün" eingestellt. Die Textausrichtung ist auf das „Zentrum“ des Bildschirms festgelegt. Die Eigenschaft „Animation“ wendet den blinkenden Effekt auf den Text an. Der blinkende Text animiert für „2.0S “und„ Infinite “. Die "@keyframes" soll dem blinkenden Text die Farbendeckigkeit verleihen. Stellen Sie es zunächst auf "0%" und "49%" für die "schwarze" Farbe ein. Das „60%“ ist auf die transparente Farbe, „99%“ transparent und „100%“ eingestellt. Die Ausgabe wird im folgenden Video angezeigt.

Ausgang:

In diesem gegebenen Video werden Sie feststellen, dass der Text blinzelt. Diese gegebene Ausgabe wird am Browser gerendert. Der blinkende Text erregt die Aufmerksamkeit des Benutzers.

Video Playerhttps: // LinuxHint.com/wp-content/uploads/2022/06/document-profile-1-microsoft -Edge-2022-05-30-23-46-47.MP400: 0000: 0000: 06use Up/Down -Pfeiltasten, um das Volumen zu erhöhen oder zu verringern.

Beispiel #3

In diesem Beispiel schreiben wir die Absätze in den HTML.

Hier haben wir die Überschrift 1 “

Wo wir die Überschrift schreiben, die wir anzeigen wollen. Dann erstellen wir eine Klasse mit dem Namen "A1" von "P" und schreiben einen Absatz darin. Außerdem erstellen wir einen weiteren Absatz mit dem Klassennamen "A2" eines anderen "P". Wir geben diese Namen der „P“ -Klasse, damit wir sie im CSS -Code zum Styling verwenden können.

CSS -Code:

Zuerst wenden wir den Stil auf die Überschrift an. Wir verwenden die Farbe „orange“ für die Schriftart oder den Text, der in der Überschrift geschrieben wurde. Die Überschrift ist auf die „Mitte“ des Ausgangsbildschirms „ausgerichtet“. Die Familie des Textes oder der Schriftart ist auf "Algerian" gesetzt, sodass die Überschrift im "algerischen" Stil angezeigt wird. Wir animieren den Text so, dass die Absätze auf dem Bildschirm blinken. Wir verwenden dieselbe Eigenschaft, die wir in unserem vorherigen Beispiel verwenden, um den Text Blink zu machen. Diese Eigenschaft ist die Eigenschaft "Animation". Es animiert oder blinzelt für "2S" (zwei Sekunden).

Die Größe des Textes im Absatz lautet "25px". Diese Absätze sind auf das „Zentrum“ ausgerichtet. Der Text des Absatzes ist auf "kursiv" gesetzt. Auch hier haben wir den "@keyframe", den wir in unseren früheren Beispielen erklärt haben. Schauen Sie sich das angegebene Video für die Ausgabe dieses Beispiels an.

Ausgang:

Video Playerhttps: // LinuxHint.com/wp-content/uploads/2022/06/document-profile-1-microsoft -Edge-2022-05-30-23-46-47.MP400: 0000: 0000: 06use Up/Down -Pfeiltasten, um das Volumen zu erhöhen oder zu verringern.

Im vorherigen Video können Sie sehen, dass der Überschriftentext nicht blinzelt, da wir den Blinking Effect oder die Animationseigenschaft auf der Überschrift nicht verwendet haben. Deshalb ist der Übergangstext in still. Aber die Absätze unter dem Kopfblink und der Stil dieser Absätze unterscheiden sich von der Überschrift.

Abschluss

In diesem Tutorial haben wir den blinkenden Effekt in CSS erläutert und diesen blinkenden Effekt mithilfe der CSS -Animationseigenschaft auf unseren Text angewendet. Dieser blinkende Text wird verwendet, um die Aufmerksamkeit des Benutzers zu erregen. Sie können feststellen, dass sich unsere Augen automatisch in Richtung dieses Textes bewegen, wenn der Text blinzelt. In diesem Tutorial haben wir die Videos des blinkenden Textes zur Verfügung gestellt. Nachdem Sie diese Videoausgänge gesehen haben, werden Sie verstehen, was Blinzeln bedeuten. Sie werden erfahren, wie der Text blinzelt und wie wir die Eigenschaft „Animation“ verwenden, und die Zeit des Blinkens im Text festlegen, um den Text nach einer gründlichen Studie dieses Tutorials zu blinken.