Wie verwende ich CSS und JS, um den Text auf der Seite zum Flackern zu bringen? (Beispiel)-js-Tutorial-php.cn

Wie verwende ich CSS und JS, um den Text auf der Seite zum Flackern zu bringen? (Beispiel)

藏色散人

Freigeben： 2018-08-11 17:48:11

Original

4365 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich vorgestellt, wie man mit js einen Text-Flash-Effekt erzielt. Beim Surfen im Internet werden Sie gelegentlich von Texten mit blinkenden Spezialeffekten angezogen. Dies kann den Schwerpunkt der Website besser hervorheben und gleichzeitig zu einem hohen Traffic an Benutzerklicks führen. Tatsächlich ist es schwierig, den Effekt des Textflashens zu erzielen, wenn wir reinen CSS-Code verwenden. Er muss mit js kombiniert werden, um zu funktionieren.

Hier stelle ich Ihnen eine sehr einfache js-Methode vor, um den besonderen Effekt des Textflashens zu erzielen, dh der Text blinkt und wird nacheinander entsprechend der angegebenen Farbe angezeigt.

Das spezifische Codebeispiel von js zum Erreichen des Text-Flashens lautet wie folgt:

<!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>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Wie verwende ich CSS und JS, um den Text auf der Seite zum Flackern zu bringen? (Beispiel)

Hinweis: Das text-decoration-Attribut gibt die dem Text hinzugefügte Dekoration an.

Der Wert des Textdekorationsblinkens. IE, Chrome oder Safari unterstützen den Attributwert „blink“ nicht. Das heißt, die aktuellen Mainstream-Browser unterstützen diesen Attributwert nicht und unterstützen nur Firefox. Wenn Sie also den Text-Blinkeffekt erzielen möchten, müssen Sie ihn mit js kombinieren.

Das obige ist der detaillierte Inhalt vonWie verwende ich CSS und JS, um den Text auf der Seite zum Flackern zu bringen? (Beispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!