Maison > Article > interface Web > Comment utiliser CSS et JS pour faire scintiller le texte de la page ? (exemple)
Comment utiliser CSS et JS pour faire scintiller le texte de la page ? (exemple)
- 藏色散人original
- 2018-08-11 17:48:114297parcourir
Cet article explique principalement comment faire en sorte que js obtienne un effet de clignotement de texte. Lorsque vous naviguez sur le Web, vous serez parfois attiré par des textes avec des effets spéciaux clignotants. Cela peut mieux mettre en évidence l’objectif du site Web et en même temps générer un trafic élevé de clics d’utilisateurs. En fait, il est difficile d'obtenir l'effet de texte clignotant lorsque nous utilisons du code CSS pur. Il doit être combiné avec js pour fonctionner.
Ici, je vais vous présenter une méthode JS très simple pour obtenir l'effet spécial du texte clignotant, c'est-à-dire que le texte clignote et s'affiche l'un après l'autre selon la couleur spécifiée.
L'exemple de code spécifique de js pour obtenir le clignotement du texte est le suivant :
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>js文字闪烁效果</title>
<meta charset="UTF-8">
<style type="text/css">
</style>
</head>
<body>
<script language="javascript">
function changeColor(){
var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray";
color=color.split("|");
document.getElementById("blink").style.color=color[parseInt(Math.random() * color.length)];
}
setInterval("changeColor()",200);
</script>
<div align="center">
<span id="blink">js实现文字闪烁示例</span>
</div>
</div>
</body>
</html>L'effet est le suivant :
Remarque : L'attribut text-decoration spécifie les décorations ajoutées au texte.
La valeur du clignotement de la décoration de texte. IE, Chrome ou Safari ne prennent pas en charge la valeur de l'attribut « blink », c'est-à-dire que les navigateurs grand public actuels ne prennent pas en charge cette valeur d'attribut et ne prennent en charge que Firefox. Par conséquent, si vous souhaitez obtenir l’effet de clignotement du texte, vous devez le combiner avec js.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!