JS+CSS实现动态变幻的彩色“下划线”效果

发布时间：2018-08-17 19:31:14 所属栏目：交互来源：站长网

导读：JS+CSS实现动态变幻的彩色下划线效果，看一下你就知道是什么了，怎么样，神奇吧！？其实这是一个下划线，就像Windows2000系统加载时的彩条一样，完全用JS控制生成的程序，非GIF图片。示例： !DOCTYPE htmlhtmlheadmeta http-equiv=Content-Type content=t

　　JS+CSS实现动态变幻的彩色“下划线”效果，看一下你就知道是什么了，怎么样，神奇吧！？其实这是一个下划线，就像Windows2000系统加载时的彩条一样，完全用JS控制生成的程序，非GIF图片。

　　示例：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>神奇的下划线</title> <style> body{background:#EEE;} div#box{text-decoration:underline;color:blue;font:900 77px "宋体";} div#box em{color:red;text-decoration:underline;} </style> </head> <body> <div id="box"> <em> </em> <em> </em> <em> </em> <em> </em></div> <div id="x">1</div> <script type="text/javascript"> window.onload=function(){ a(); } var a=function(){ show("box","#veryhuocom"); hide("box","em","pink"); setTimeout("b()",500); } var b=function(){ show("box","pink"); hide("box","em","#veryhuocom"); setTimeout("a()",500); } var show=function(id,color){ var box=document.getElementById(id); box.style.color=color; } var hide=function(id,element,color){ var ems=document.getElementById(id).getElementsByTagName(element); var i; for(i=0;i<ems.length;i +=1){ ems[i].style.color=color; } var box=document.getElementById("box"); } </script> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：平顶山站长网）

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