一个登录窗口穿越星空来到你面前，很深遂的感觉，运行一下试试
<html> <head> <title>一个很牛的登录窗口</title> <style> body { padding:0px; margin:0px; background-Color:black; border-0px; font-size:12px; color:#DDD; overflow:hidden; } #divLogin { padding:32px; background-Color:#EEE; color:navy; filter:alpha(opacity=60); z-Index:90; text-align:center; } #divLogin td{ color:#666; } .input0 { border:#000 1px solid; 158px; height:22px; color:navy; } .input1 { border:#000 1px solid; 80px; height:20px; background-Color:transparent; color:navy; padding-top:2px; } </style> <script> wx=wxx=screen.availWidth; hx=hxx=screen.availHeight; ds=1800; stars=new Array(); starTimer=""; logined=false; top.moveTo(0,0);top.resizeTo(wxx,hxx); function init(){ wx=document.body.clientWidth; hx=document.body.clientHeight; for(var i=0;i<16;i++)createStar(); startMoveStar(); startLoginMove(); } function startLoginMove(){ divLogin.x=-175; divLogin.y=-100; divLogin.z=100000; divLogin.c=0; divLogin.size=350; divLogin.speed=500; setTimeout(loginMove,10); } function loginMove(){ divLogin.z-=divLogin.speed; var tRe=d3d2(divLogin.x,divLogin.y,divLogin.z,divLogin.size,divLogin.c).split(":"); with(divLogin.style){ position="absolute"; left=tRe[0]; top=tRe[1]; if(parseInt(tRe[2])<=0){ display="none"; }else{ display=""; width=tRe[2]; height=parseInt(tRe[2])*200/350; overflow="hidden"; } } if(divLogin.z>200){ setTimeout(loginMove,10); }else{ with(divLogin.style){ position="absolute"; left=wx/2+divLogin.x; top=hx/2+divLogin.y; display=""; width=-2*divLogin.x; height=-2*divLogin.y; overflow="hidden"; } divLogin.children[0].style.display=""; stopMoveStar(); shakeWin(); } } function showContent(i){ i=isNaN(i)?-1:parseInt(i); i++; try{ switch(i%7){ case 0:divLogin.style.top=50;break; case 1:divLogin.style.top=-100;break; case 2:divLogin.style.top=-160;break; case 3: divLogin.style.top=-300; divLogin.children[0].style.display="none"; divLogin.children[0].innerHTML=divMain.innerHTML; break; case 4: divLogin.x=-wx/2+50; divLogin.y=-hx/2+30; divLogin.z=70000; divLogin.c=0; divLogin.size=wx-100; divLogin.speed=500; divLogin.filters[0].enabled=false; logined=true; setTimeout(loginMove,10); break; } }catch(e){return(false);} if(i<5){ setTimeout("showContent("+i+");",10); }else{ loginMove(); } } function createStar(){ var theIndex=stars.length; stars[theIndex]=document.createElement("DIV"); document.body.insertBefore(stars[theIndex]); setRandomAttributes(stars[theIndex]); setStyle(stars[theIndex]); } function moveStar(){ for(var i=0;i<stars.length;i++){ stars[i].z-=stars[i].speed; if(stars[i].z<1500)setRandomAttributes(stars[i]); setStyle(stars[i]); } } function startMoveStar(){ stopMoveStar(); starTimer=setInterval(moveStar,10); } function stopMoveStar(){ try{ clearInterval(starTimer); }catch(e){} } function d3d2(x,y,z,size,color){ var x=parseFloat(x); var y=parseFloat(y); var z=parseFloat(z); var size=parseFloat(size); var color=parseFloat(color); var percent=ds/(ds+z); x=parseInt(wx/2+x*percent); y=parseInt(hx/2+y*percent); size=parseInt(size*percent); color=parseInt(color*percent/2.5+153); return(x+":"+y+":"+size+":"+color); } function getColor(strC){ try{ var i=eval("0x"+strC.substring(1,3)); }catch(e){return(255);} return(i); } function setRandomAttributes(obj){ obj.size=parseInt(Math.random()*10)+10; obj.c=parseInt(Math.random()*45)+210; obj.x=(parseInt(Math.random()*500)+500)*(Math.random()>0.5?1:-1); obj.y=(parseInt(Math.random()*400)+400)*(Math.random()>0.5?1:-1); obj.speed=parseInt(Math.random()*120)+180; obj.z=parseInt(Math.random()*12000)+8000; } function setStyle(obj){ var tRe=d3d2(obj.x,obj.y,obj.z,obj.size,obj.c).split(":"); with(obj.style){ position="absolute"; left=tRe[0]; top=tRe[1]; if(parseInt(tRe[2])<=0){ display="none"; }else{ display=""; width=tRe[2]; height=tRe[2]; backgroundColor=toColor(tRe[3]); overflow="hidden"; } } } function toColor(intV){ var cc=[0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"]; var intV=parseInt(intV); re=""+cc[parseInt(intV/16)]+cc[intV%16]; return("#"+re+re+re); } function shakeWin(i){ i=isNaN(i)?-1:parseInt(i); i++; try{ switch(i%7){ case 0:window.moveTo(3,3);break; case 1:window.moveTo(-3,3);break; case 2:window.moveTo(-3,-3);break; case 3:window.moveTo(3,-3);break; case 4:window.moveTo(-3,3);break; case 5:window.moveTo(3,3);break; case 6:window.moveTo(0,0);break; } }catch(e){return(false);} if(i<7){ setTimeout("shakeWin("+i+");",10); }else{ window.moveTo(0,0); if(!logined)startMoveStar(); } } </script> </head> <body onload="init();"> <div id=divLogin style="display:none;"> <form onsubmit="return(false);" style="display:none;"> <table> <tr><td colspan=2 align=center>Login</td></tr> <tr> <td><label>Name:</label></td> <td><input class=input0 value="Guest"></td> </tr> <tr> <td><label>Pass:</label></td> <td><input class=input0 type=password value="Guest"></td> </tr> <tr><td colspan=2 align=center> <input type=submit value="OK" class=input1 onclick="showContent();"> <input type=reset value="Cancel" class=input1> </td></tr> </table> </form> </div> <div id=divMain style="display:none;"> <iframe src="/" width="100%" height="100%"></iframe> </div> </body> </html>