文字交替闪烁效果,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>
提醒：可修改儿女码再运行!

（编辑：河北网）

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