这是一个文字特效,由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>提示:可修改后代码再运行!