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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了怎么用css和js让页面文字出现不停闪烁的效果？（示例），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1178字，纯文字阅读大概需要2分钟。

内容图文

本篇文章主要介绍怎么让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>

效果如下图：

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

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

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

以上就是怎么用css和js让页面文字出现不停闪烁的效果？（示例）的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的怎么用css和js让页面文字出现不停闪烁的效果？（示例）全部内容，希望文章能够帮你解决怎么用css和js让页面文字出现不停闪烁的效果？（示例）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/285318.html

来源：【匿名】