search

Home >Web Front-end >JS Tutorial >How to use css and js to make text on the page flicker? (example)

How to use css and js to make text on the page flicker? (example)

藏色散人
藏色散人Original
2018-08-11 17:48:114408browse

This article mainly introduces how to make js achieve text flashing effect. When browsing the web, you will occasionally be attracted by text with flashing special effects. This can better highlight the focus of the website and at the same time bring high traffic of user clicks. In fact, it is difficult to achieve the effect of text flashing when we use pure css code. It must be combined with js to operate.

Here I will introduce to you a very simple JS method to achieve the special effect of text flashing, that is, the text flashes and displays one after another according to the specified color.

The specific code example of js to achieve text flashing is as follows: 

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

The effect is as follows:

How to use css and js to make text on the page flicker? (example)

Note: The text-decoration attribute specifies the decoration added to the text.

The value of text-decoration blink. IE, Chrome or Safari do not support the "blink" attribute value. That is to say, the current mainstream browsers do not support this attribute value and only support Firefox. Therefore, if you want to achieve the text flashing effect, you must combine it with js.

The above is the detailed content of How to use css and js to make text on the page flicker? (example). For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：A brief introduction to responsive data in Vue (picture and text)Next article：A brief introduction to responsive data in Vue (picture and text)

Related articles

See more