Tag HTML <blink>
Le tag <blink> est un élément non standard utilisé pour créer un texte inclus, qui clignote lentement. L'effet de clignotement est très rarement utilisé, car il est très gênant pour les utilisateurs de regarder un texte constamment allumé et éteint.
Syntaxe
Le tag <blink> est apparié, l’élément fermant (</blink>) est requis.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<h1>L'élément <blink></h1>
<blink>L'élément <blink> est obsolète. Pour obtenir un effet clignotant, vous devez utiliser CSS ou JavaScript. Voir des exemples dans la section suivante.</blink>
</body>
</html>Résultat
Effet clignotant à l'aide de CSS
Pour obtenir un effet clignotant, vous pouvez utiliser la propriété CSS3 animation définie par le règle @keyframes
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</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>Texte clignotant</blink>
</h3>
<span class="blink-one">CSS blinking effect for opacity starting with 0%</span>
<p class="blink-two">CSS blinking effect for opacity starting with 100%</p>
</body>
</html>Le texte de l'exemple donné s'estompe puis s'affiche à nouveau. Vous pouvez jouer avec le code CSS pour changer l'apparence du texte clignotant.
Effet clignotant à l'aide de JavaScript
Vous pouvez également utiliser des scripts pour faire clignoter l'élément.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</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;">Effet clignotant avec JavaScript</blink>
</body>
</html>Dans l'exemple mentionné ci-dessus, le script est configuré pour masquer le texte lorsqu'il apparaît et le faire apparaître lorsqu'il disparaît, permettant ainsi d'obtenir un effet clignotant.
Support de Navigateurs
|
|
|
|
|
|---|---|---|---|---|
| ✕ | ✕ | ✕ | ✕ | ✕ |
Pratiquez vos connaissances
