文字交替闪烁效果,js+css配合实现

　　这是一个文字特效，由JavaScript+CSS配合实现。

　　效果：交互式改变文字颜色值，形成闪烁效果。

　　文字交替以前就很流行，现在可能有点太小儿科了，不过代码却是基础的，学习一下不枉费。

<title>文字颜色交替</title> <script language="JavaScript" type="text/javascript"> function randomColor() { var chars = "0123456789abcdef"; var color = "#"; for (var i=0; i<6; i++) { var rnd = Math.floor(16 * Math.random()); color += chars.charAt(rnd); } return color; } function makeBold() { document.styleSheets[0].disabled = false; document.styleSheets[1].disabled = true; if (document.styleSheets[0].rules) { document.styleSheets[0].rules[0].style.color = randomColor(); document.styleSheets[0].rules[1].style.color = randomColor(); } else if (document.styleSheets[0].cssRules) { document.styleSheets[0].cssRules[0].style.color = randomColor(); document.styleSheets[0].cssRules[1].style.color = randomColor(); } window.setTimeout("makeLighter();", 1000); } function makeLighter() { document.styleSheets[0].disabled = true; document.styleSheets[1].disabled = false; if (document.styleSheets[0].rules) { document.styleSheets[1].rules[0].style.color = randomColor(); document.styleSheets[1].rules[1].style.color = randomColor(); } else if (document.styleSheets[0].cssRules) { document.styleSheets[1].cssRules[0].style.color = randomColor(); document.styleSheets[1].cssRules[1].style.color = randomColor(); } window.setTimeout("makeBold();", 1000); } window.onload = makeBold; </script> <style type="text/css" id="strong"> p { font-weight: bold; } span { font-style: italic; } </style> <style type="text/css" id="weak"> p { font-weight: lighter; } span { font-style: normal; } </style> <p>CSS <span>and</span> JavaScript</p><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：开发网_郴州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!