Heim > Artikel > Web-Frontend > Wie verwende ich CSS und JS, um den Text auf der Seite zum Flackern zu bringen? (Beispiel)

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

藏色散人Original: 2018-08-11 17:48:114340Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Eine kurze Einführung in responsive Daten in Vue (Bild und Text)Nächster Artikel：Eine kurze Einführung in responsive Daten in Vue (Bild und Text)

In Verbindung stehende Artikel

Mehr sehen