CSS+VBScript制作的酷酷光照效果

2005-11-22 09:34 51cto.com整理我要评论(0) 字号：T | T

本文介绍利用CSS+VBScript如何实现字的酷光照效果

AD：

<html>
<head>
<title>Untitled</title>
</head>

<div id="myLightObject" style="position: relative; height: 400px; width: 400px; top: 10px; left: 0px;
color: White; filter: light">
<center>
黑夜给了我一双眼睛,<br>
而我却用它来寻找光明,<br>
园林晴昼春谁主<br>
暖律潜催，幽谷暄和，黄鹂翩翩，乍迁芳树
<p>
春花秋月何时了，往事知多少<br>
小楼昨夜又东风<br>
故国不堪回首月明中。<br>
雕栏玉砌应犹在，只是朱颜改。
</p>
<p>
问君能有几多愁，<br>
恰似一江春水向东流。<br>
CSS滤镜与VBScript结合运用的效果<br>
利用CSS的Light滤镜模拟移动的光锥<br>
</p>
用VBScript捕捉鼠标的移动,令光锥射向也跟着移动

</center>
</div>

sub document_onMouseMove()
call myLightObject.filters.light(0).MoveLight(1,window.event.x,window.event.y,0,1)
end sub

</script>

</body>
</html>
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="1" bgcolor="cccccc"><img src="/img/blank.gif" width="1" height="1"></td>
</tr>
<tr>
<td height="30" bgcolor="#F6F6F6"> <img src="/img/rtg_btn_print.gif" width="16" height="15">
<a href="javascript:window.print();">打印本文</a> | <img src="/img/feedback.gif" width="13" height="12"><a href="/sendmail.asp?id=1711">
推荐朋友</a> | <img src="/img/rtg_btn_save.gif" width="17" height="16" align="absmiddle">
<a href="javascript:OnSave();">收藏文章</a> | <img src="/img/windows_close.gif" width="12" height="12">
<a href="javascript:window.close()">关闭窗口</a></td>
</tr>
</table></td>
<td width="3"> </td>
</tr>
</table>
<table width="766" border="0" align="center" cellpadding="0" cellspacing="0" background="/img/page-bg.gif" bgcolor="#FFFFFF">
<tr>
<td height="30"> </td>
<td rowspan="2" align="center" valign="top"><br><SCRIPT language=javascript>showbanner(5,5);</SCRIPT><br>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="25"> <strong>相关文章</strong></td>
</tr>
<tr>
<td height="1" bgcolor="cccccc"><img src="/img/blank.gif" width="1" height="1"></td>
</tr>
<tr>
<td class="title-list"><img src=/img/about_no.gif width=7 height=7> <A href=/article/20010328/200103281478.shtml>网页中轻松实现三维字体<SPAN class=aritcle-date> (2001年3月28日)</SPAN></A><br/><br/><img src=/img/about_no.gif width=7 height=7> <A href=/article/20010113/200101131206.shtml>Dreamweaver4中CSS的定义<SPAN class=aritcle-date> (2001年1月13日)</SPAN></A><br/><br/><img src=/img/about_no.gif width=7 height=7> <A href=/article/20010111/200101111182.shtml>CSS2参考之十一<SPAN class=aritcle-date> (2001年1月11日)</SPAN></A><br/><br/><img src=/img/about_no.gif width=7 height=7> <A href=/article/20010111/200101111181.shtml>CSS2参考之十<SPAN class=aritcle-date> (2001年1月11日)</SPAN></A><br/><br/><img src=/img/about_no.gif width=7 height=7> <A href=/article/20010111/200101111180.shtml>CSS2参考之九<SPAN class=aritcle-date> (2001年1月11日)</SPAN></A><br/><br/><img src=/img/about_no.gif width=7 height=7> <A href=/article/20010111/200101111179.shtml>CSS2参考之八<SPAN class=aritcle-date> (2001年1月11日)</SPAN></A><br/><br/><img src=/img/about_no.gif width=7 height=7> <A href=/article/20010111/200101111178.shtml>CSS2参考之七<SPAN class=aritcle-date> (2001年1月11日)</SPAN></A><br/><br/><img src=/img/about_no.gif width=7 height=7> <A href=/article/20010111/200101111177.shtml>CSS2参考之六<SPAN class=aritcle-date> (2001年1月11日)</SPAN></A><br/><br/> </td>
</tr>
</table></td>
<td width="1" rowspan="3" bgcolor="#CCCCCC"></td>
<td width="149" rowspan="3" valign="top" bgcolor="#F6F6F6"> <p></p></td>
<td> </td>
</tr>
<tr>
<td width="3"></td>
<td width="3"> </td>
</tr>
</table>
<table width="766" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="/img/bottom_gb_3.gif" width="766" height="21"></td>
</tr>
</table>
</body>
</html>