Js+CSS定義神奇的下劃線

2024-09-05 12:22:29

字體：大中小

來源：轉載

供稿：網友

神奇的下劃線，采用JavaScript技術與CSS技術結合，打造炫彩的下劃線效果，就像Windows2000系統加載時的彩條一樣，完全用JS控制生成的程序，非GIF圖片。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " [url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url] "><html xmlns=" [url]http://www.w3.org/1999/xhtml[/url] "><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   class="iwvjtn8m0"   id="box"> <em> </em> <em> </em> <em> </em> <em> </em></div>   <div   class="iwvjtn8m0"   id="x">1</div><script type="text/javascript">window.onload=function(){	a();}var a=function(){	show("box","#abcdef");	hide("box","em","pink");	setTimeout("b()",500);}var b=function(){	show("box","pink");	hide("box","em","#abcdef");	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>

上一篇：搜狗云輸入法源代碼

下一篇：Google的do a barrel roll效果代碼