Rumah > Artikel > hujung hadapan web > 怎么用css和js让页面文字出现不停闪烁的效果？（示例）

怎么用css和js让页面文字出现不停闪烁的效果？（示例）

藏色散人asal: 2018-08-11 17:48:114340semak imbas

本篇文章主要介绍怎么让js实现文字闪烁效果。在浏览网页时，偶尔会被闪动特效的文字吸引了目光。这样更能突出网站的重点，同时带来用户点击的高流量。其实我们用纯用css代码时很难实现文字不停闪动的效果，必须要结合js来操作。

这里给大家介绍一种非常简单的js实现文字闪烁的特效方法，即文字按照指定颜色逐次闪烁显示。

js实现文字闪烁的具体代码示例如下：

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

效果如下图：

注：text-decoration 属性规定添加到文本的修饰。

text-decoration的值blink。IE、Chrome 或 Safari 均不支持 "blink" 属性值，也就是现在的主流的浏览器都是不支持该属性值的，仅仅支持火狐浏览器。所以想要实现文字闪烁效果必须要结合js来实现。

Atas ialah kandungan terperinci 怎么用css和js让页面文字出现不停闪烁的效果？（示例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Vue中响应式数据的简单介绍（图文）Artikel seterusnya：封装小程序中get请求和post请求成全局函数（代码）

Artikel berkaitan

Lihat lagi