Trick # 228 | Dieser Beitrag beinhaltet 444 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Als das WWW in den 90er-Jahren immer populärer wurde, war noch nicht viel los in Sachen Animationen. Ein Auswuchs von seinerzeit: Blinkende Texte. Diese vermochten richtig zu nerven und der <blink>-Tag ist denn auch aus dem HTML-Standard rausgeflogen. Wer es dennoch unbedingt blinken lassen möchte, sei der nachfolgende Hack empfohlen.
Unser heutiges Ziel: ein blinkender Text. So etwas:
Nun: Der <blink>-Tag aus den frühen Tagen des WWW ist in heutigen HTML-Versionen nicht mehr enthalten. Der Effekt lässt sich aber dennoch erzwingen – so denn jemand findet, es müsse ums Töten blinken auf der Website.
Zunächst fügen Sie im HTML- oder Text-Modus Ihres WYSIWYG-Editors folgenden HTML-Code ein:
<blink>Blinkender Text</blink>Würden Sie diesen Text nun online betrachten, würde er kaum blinken. Eben, weil der Tag aus HTML entfernt wurde. Mit ein wenig CSS-Code können Sie das Blinken erzwingen. Der Code gehört ins CSS-Stylesheet Ihrer Website – im WordPress-Backend etwa unter Design/Customizer/Zusätzliches CSS:
blink {
animation: 2s linear infinite condemned_blink_effect;
}
@keyframes condemned_blink_effect {
0% {
visibility: hidden;
}
50% {
visibility: hidden;
}
100% {
visibility: visible;
}
}Auf Zeile 2 können Sie festlegen, wie lange die Animationsdauer ist. Ein Zeigen-/Verstecken-Turnus in unserem Beispiel dauert somit 2 Sekunden. Dies können Sie natürlich anpassen.
Zum Abschied wir noch einmal kurz. Dann legen wir das Thema wieder beiseite.
Werbung
Werbung
