DDR爱好者之家

用CSS实现鼠标单击特效
站长资源 2024/11/30 佚名
22 1538
DDR爱好者之家 Design By 杰米
如果你能很好地应用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="/UploadFiles/2021-04-02/200598478474.jpg">

在刚才我们插入图片下一行中加入〈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〉

这样就设置好一个比较有个性的图片特效

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米