JS+CSS实现文字颜色闪烁动感效果 JavaScript+CSS配合,交互式改变文字颜色值,形成闪烁效果,文字交替以前就很流行,现在可能有点太小儿科了,不过代码却是基础的,学习一下不枉费。
<title>JS+CSS实现文字颜色闪烁动感效果/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>Welcome <span>To</span> XinQing Waystation</p> <p align="center">本特效由 <a href="http://www.update8.com">技术网网页特效</a>只为兴趣与学习交流,不作商业用途。</p> 提示:您可以先修改部分代码再运行,复制代码和保存代码功能在Firefox下无效。