Make It Blink HTML-Tutorial - Verwendung des Blink-Tags mit Codebeispielen

In den früheren Tagen des Webs waren HTML-Elemente wie das Blink-Tag native Methoden, um einige Animationseffekte hinzuzufügen, um eine Webseite zu beleben. Wie können wir diese Animationen heute verwenden, um unseren Websites und Apps Flare hinzuzufügen?

  • Was ist das HTML-Tag-Blinken?
  • Wie benutzt man das Blink-Tag?
  • Können Sie das Blink-Tag noch verwenden?
  • Neuerstellung des Blink-Tags mit CSS-Animationen

Was ist das HTML-Tag-Blinken?

Das blinkende Tag ( ) ist ein veraltetes HTML-Tag, das den Inhalt dieses Tags langsam blinken lässt.

Dies war zusammen mit einigen anderen veralteten Tags wie dem Festzelt-Tag ( ) eine einfache Möglichkeit, Ihrer Site einfache Animationseffekte hinzuzufügen.

Wie benutzt man das Blink-Tag?

Da das Blink-Tag ein einfaches HTML-Element war, würden Sie es genau in Übereinstimmung mit Ihrem Inhalt verwenden.

Wenn Sie beispielsweise möchten, dass das Wort "blinken" in blink-182 blinkt, schreiben Sie den folgenden HTML-Code:

blink-182

Können Sie das Blink-Tag noch verwenden?

Wie Sie vielleicht im obigen GIF bemerkt haben, ist dieses Tag veraltet.

Dies bedeutet, dass Sie das blinkende HTML-Tag selbst nicht verwenden können. Das sollte uns jedoch nicht davon abhalten, es in all seiner blinkenden Pracht neu zu gestalten.

Hinweis: Das Blink-Tag wurde aus Gründen der Barrierefreiheit nicht mehr unterstützt. Bitte recherchieren Sie, bevor Sie versuchen, eine Lösung zu verwenden, die den gleichen Effekt erzielt, da wir uns alle bemühen sollten, unsere Projekte so umfassend wie möglich zu gestalten.

Neuerstellung des Blink-Tags mit CSS-Animationen

In der heutigen Welt der Webentwicklung werden Animationen im Allgemeinen mit CSS oder JavaScript verarbeitet. Mithilfe von CSS-Animationen können wir unser Blink-Tag mit wenigen Zeilen neu erstellen und wieder im Geschäft sein.

Mit folgendem CSS:

.blink { animation: blink 1s steps(1, end) infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } 

Sie können die .blinkKlasse zu jedem HTML-Element hinzufügen , damit sie blinkt.

blink-182

Modernisierung des Blink-Tags

Dies ist 2020, was wäre, wenn wir etwas Glatteres wollten?

Zunächst können wir die Animation verblassen lassen, indem wir sie aus den Animationsdefinitionen entfernen steps.

.blink { animation: blink 1s infinite; } 

Oder was wäre, wenn wir es wie einen Science-Fiction-Effekt ausblenden wollten?

.blink { animation: blink 3s infinite; } @keyframes blink { 0% { opacity: 1; } 100% { opacity: 0; color: blue; } } 

Oder sogar einen schönen Grow and Fade-Effekt.

.blink { animation: blink 3s infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; transform: scale(2); } 51% { opacity: 0; transform: scale(0); } 100% { transform: scale(1); opacity: 1; } } 

Mit CSS die Kontrolle über Animationen übernehmen

Obwohl Sie das Blink-Tag möglicherweise nicht verwenden können, haben Sie dennoch viele Optionen. CSS bietet nativ eine Vielzahl von Animationsoptionen. Egal, ob Sie Ihren bevorzugten HTML-Zeitvertreib oder die Alien-Titelsequenz neu erstellen möchten, die Möglichkeiten sind nahezu unbegrenzt.

Folgen Sie mir für mehr Javascript, UX und andere interessante Dinge!

  • ? Folge mir auf Twitter
  • ? ️ Abonniere mein Youtube
  • ✉️ Melden Sie sich für meinen Newsletter an