当前位置：首页 -> 网页设计 -> HTML/CSS -> 用CSS实现鼠标单击特殊效果图

用CSS实现鼠标单击特殊效果图

时间： 2021-07-31 作者：daque

即使你能很好地运用css，那么你的网页将被化装得很靓。底下就给大师引见用css做出的一个鼠标单击特出功效图。一、将底下的代码复制到你的网页中<head>和</head>之间。<style>.shadow {filter: shadow(color=blue，direction=225)}.shadow1 {filter: shadow(color=red，direction=225)}.shadow2 {filter: shadow(color=green，direction=225)}.div {cursor: move; filter: blur(add=ture，direction=135，strength=10); width: 800px}</style> 在这边运用的是blur滤镜。2、在页面中插入一张图片，比方我插入是<img border="0" src="http://www.okasp.com/techinfo/file:///f:/hbg/图象/船坞/武测良辰美景/广场夜景.jpg" width="300" height="210">。在其前介入<td id=flttgt style="filter: light(enabled=1)，'width 300'" width=315>。在方才咱们插入图片下一条龙中介入<td style="vertical-align: top" width=314><span id=holder stylefont-size:14ptcolor:yellow?>。（把鼠标移到图片上，光源会盯梢鼠标。单击图片介入其余光源而且伴随鼠标挪动。)3、在树立了图片属性后，咱们还要运用javascript剧本代码，也即是使图片伴随鼠标挪动少许殊效，代码如次。<script language=javascript><!--var g_numlights=0;var blurbs= new array(" 此刻的动静滤镜付与了网页更多的交互本能来相应用户的举措。"，" 咱们运用了光源滤镜来相应用户的点击。点击图片不妨减少光源。"，" 经过捕获用户鼠标场所的本领来挪动光源。"，" 不须要太多的编制程序。");window.onload=setlights;document.onclick=keyhandler;flttgt.onmousemove=mousehandler;function setlights(){flttgt.filters[0].clear();flttgt.filters[0].addcone(0，0，5，100，100，225，225，0，60，15);if (g_numlights>0){flttgt.filters[0].addcone(400，170，5，100，100，225，0，0，160，15);if (g_numlights>1){flttgt.filters[0].addcone(320，330，5，100，100，0，225，225，60，15);}}}function keyhandler(){g_numlights=(g_numlights+=1)%4;holder.innerhtml=blurbs[g_numlights];setlights();}function mousehandler(){x=(window.event.x-80);y=(window.event.y-80);flttgt.filters[0].movelight(1，x，y，5，1);if(g_numlights>0){flttgt.filters[0].movelight(1，x，y，5，1);if(g_numlights>1){flttgt.filters[0].movelight(2，x，y，5，1);}}}</script> （根源：赛迪网）

用CSS实现鼠标单击特殊效果图

相关推荐

推荐下载

热门阅览

最新排行