至顶网›软件频道 ›CSS+VBScript制作的酷酷光照效果

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

扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条

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

作者：51cto.com整理　来源：51cto.com 2007年9月10日

<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>

查看本文来源

用VBScript自制IE工具栏按钮

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

VIP专区

VIP用户

普通用户

邮件订阅

如果您非常迫切的想了解IT领域最新产品与技术信息，那么订阅至顶网技术邮件将是您的最佳途径之一。

重磅专题

往期文章

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

业界热点: