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

用CSS实现鼠标单击特效

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

即使你能很好地运用css，那么你的网页将被化装得很靓。底下就给大师引见用css做出的一个鼠标单击特出功效图。

1、将底下的代码复制到你的网页中庸之间。

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

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实现鼠标单击特效

如许就树立好一个比拟有天性的图片殊效，功效如图1所表露。

图1

用CSS实现鼠标单击特效

相关推荐

推荐下载

热门阅览

最新排行