Das Tag <blink> wurde verwendet, um einen eingeschlossenen Text, der langsam blinkt, zu erstellen. Der Blinkeffekt wird sehr selten verwendet, da es für den Benutzer sehr ärgerlich ist, einen Text zu sehen, der sich ständig ein- und ausschaltet.
Das Tag <blink> ist veraltet. Obwohl einige Browser es noch unterstützen, wird es gerade gelöscht. Verwenden Sie dieses Element nicht, da sonst Ihre Seiten beschädigt werden können.
Syntax
Das Element <blink> wird gepaart verwendet. Der Inhalt muss zwischen den Start- (<blink>) und Endtags (</blink>) platziert werden.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<h1>Das Element <blink> </h1>
<blink>Das Tag <blink> ist veraltet. Stattdessen können Sie eine Kombination von CSS und JavaScript verwenden, um einen Blinkeffekt zu bekommen. Beispiele finden Sie unten.</blink>
</body>
</html>Ergebnis
Blink-Effekt mit CSS
Um einen Blinkeffekt zu bekommen, verwenden Sie CSS3-Eigenschaft animation, die mit die Regel @keyframes definiert wird.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
blink {
animation: blinker 0.6s linear infinite;
color: #1c87c9;
}
@keyframes blinker {
50% { opacity: 0; }
}
.blink-one {
animation: blinker-one 1s linear infinite;
}
@keyframes blinker-one {
0% { opacity: 0; }
}
.blink-two {
animation: blinker-two 1.4s linear infinite;
}
@keyframes blinker-two {
100% { opacity: 0; }
}
</style>
</head>
<body>
<h3>
<blink>Blinking-Text</blink>
</h3>
<span class="blink-one">CSS-Blinkeffekt für Opazität mit 0%</span>
<p class="blink-two">CSS-Blinkeffekt für Opazität mit 100%</p>
</body>
</html>Der Text im angegebenen Beispiel wird ausgeblendet und erscheint dann wieder. Sie können mit CSS-Code das Aussehen des blinkenden Textes ändern.
Blinkeffekt mit JavaScript
Sie können auch Skripte verwenden, um das Element blinken zu lassen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<script type="text/javascript">
function blink() {
var blinks = document.getElementsByTagName('blink');
for (var i = blinks.length - 1; i >= 0; i--) {
var s = blinks[i];
s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';
}
window.setTimeout(blink, 1000);
}
if (document.addEventListener) document.addEventListener("DOMContentLoaded", blink, false);
else if (window.addEventListener) window.addEventListener("load", blink, false);
else if (window.attachEvent) window.attachEvent("onload", blink);
else window.onload = blink;
</script>
<blink style="color: #1c87c9;">Blinkeffekt mit JavaScript</blink>
</body>
</html>Im vorigen Beispiel ist das Skript so eingestellt, dass es den Text ausblendet, wenn er erscheint, und ihn erscheinen lässt, wenn er verschwindet, wodurch ein Blinkeffekt erzielt wird.
Browser-Support
|
|
|
|
|
|---|---|---|---|---|
| ✕ | ✕ | ✕ | ✕ | ✕ |
Übe dein Wissen
