recherche

Maison >interface Web >js tutoriel >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:114406parcourir

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 :

Comment utiliser CSS et JS pour faire scintiller le texte de la page ? (exemple)

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Une brève introduction aux données réactives dans Vue (image et texte)Article suivant：Une brève introduction aux données réactives dans Vue (image et texte)

Articles Liés

Voir plus