recherche

Maison  >  Article  >  programmation quotidienne  >  Comment obtenir un effet de clignotement de texte en js ? (Photos, texte + vidéo)

Comment obtenir un effet de clignotement de texte en js ? (Photos, texte + vidéo)

藏色散人
藏色散人original
2018-10-18 09:38:497804parcourir

Cet article présente principalement comment utiliser js pour obtenir des effets de clignotement de texte.

Dans le processus de conception de la page frontale, l'ajout d'effets spéciaux dynamiques peut évidemment rendre le contenu du site Web plus riche et plus beau, attirant l'attention des utilisateurs.

Pour les novices du front-end, il peut être difficile d'utiliser js pour implémenter certains effets spéciaux, mais c'est en fait très simple.

Ci-dessous, nous vous présenterons la méthode d'effets spéciaux de js pour obtenir le clignotement du texte à travers un exemple de code simple. [Pour plus d'effets spéciaux js, veuillez visiter la colonne téléchargement du code des effets spéciaux js pour voir]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js实现文字闪烁特效</title>
</head>
<body>
<div id="blink">PHP中文网</div>
</body>
<script language="javascript">
    function changeColor() {
        var color = [&#39;#F96&#39;,&#39;#cc6&#39;];
        // parseInt 将字符串类型转换为整型  random 获取0-1之间的随机数   color.length color数组的长度
 document.getElementById("blink").style.color = color[parseInt(Math.random() * color.length)];
    }
    // 执行定义好的changeColor方法，200毫秒执行一下
 setInterval("changeColor()", 200);
</script>
<style>
    * {
        color: #CC6
 }
</style>
</html>

L'effet final est le suivant :

Comment obtenir un effet de clignotement de texte en js ? (Photos, texte + vidéo)

Cet article concerne la méthode de js pour obtenir un effet de clignotement de texte Il est également très simple et facile à comprendre. J'espère qu'il sera utile aux amis dans le besoin !

Des codes d'effets spéciaux javascript plus sympas sont disponibles sur : Collection d'effets spéciaux Javascript

Si vous souhaitez en savoir plus sur les connaissances liées au front-end, vous pouvez suivre le PHP Site Web chinoisTutoriels vidéo JavaScript, Tutoriels vidéo HTML, Tutoriels vidéo CSS, Tutoriels vidéo Bootstrap et autres tutoriels connexes, invitons tout le monde à se référer et apprenez !

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：Comment implémenter un dégradé de couleurs d’arrière-plan en CSS3 ? (Photos, texte + vidéo)Article suivant：Comment implémenter un dégradé de couleurs d’arrière-plan en CSS3 ? (Photos, texte + vidéo)

Articles Liés

Voir plus