【CSS+DIV】（1）——滤镜的应用

来源：互联网发布：php 判断是不是整数编辑：程序博客网时间：2024/05/17 02:06

背景：牛腩中接触过CSS，当时对这个CSS情有独钟，因为它可以美化界面，而我就喜欢和界面这种看得见效果的东西打交道，现在又重新学习，而且内容还那么多，超级开心，废话少说，动手吧！

一、CSS滤镜

CSS滤镜并不是浏览器的插件，也不符合CSS标准，而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器（其他浏览器不支持此功能）中的一类功能的集合。

CSS滤镜的标识符是“filter”，总体上跟其他CSS语句一样，都十分简单，语法如下：filter:filtername(parameters);

也就是说，进行滤镜操作必须先定义filter，filtername是滤镜属性名，包括alpha、blur和chroma等多种属性；parameters是表示各个滤镜属性的参数，也正是这些参数决定了滤镜将以怎样的效果显示。

二、基本滤镜

通常指可以直接作用在对象上，便能立即生效的滤镜。

1、Alpha通道

代码：

<html><head><title>alpha滤镜</title><style>body{background:url(bg1.jpg);  /*星空背景 */margin:20px;}img{border:1px solid #d58000;} .alpha1{                         filter:alpha(opacity=50);    /*设置透明度50%*/}.alpha2{filter:alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=0,finishx=0,finishy=100);/* 从上到下渐变 */}.alpha3{filter:alpha(opacity=100,finishopacity=0,style=2);/* 圆形渐变，中间不透明，四周透明 */}.alpha4{filter:alpha(opacity=0,finishopacity=80,style=2);}.alpha5{filter:alpha(opacity=100,finishopacity=0,style=3);/* 矩形渐变，中间不透明，四周透明 */}.alpha6{filter:alpha(opacity=0,finishopacity=100,style=3);/* 反之 */}</style></head><body><img src="村庄.jpg" border="0"> <img src="村庄.jpg" border="0" class="alpha1"> <img src="村庄.jpg" border="0" class="alpha2"> <img src="村庄.jpg" border="0" class="alpha3"> <br><img src="村庄.jpg" border="0" class="alpha4"> <img src="村庄.jpg" border="0" class="alpha5"> <img src="村庄.jpg" border="0" class="alpha6"></body></html>

效果：

2、模糊（Blur）& 运动模糊（Motion Blur）

代码：

<html><head><title>Blur & Motion Blur</title><style>body{margin:10px;}.blur{filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false); }.motionblur{filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=90,add=true);/* 水平向右 */}</style>   </head><body><img src="村庄.jpg"> <img src="村庄.jpg" class="blur">  <span style="font-family: KaiTi_GB2312;">/* 模糊 */</span><img src="村庄.jpg" class="motionblur">  <span style="font-family: KaiTi_GB2312;">/* 移动模糊 */</span></body></html>

效果：

3、透明色（Chroma）

代码：

<html><head><title>chroma滤镜</title><style>body{margin:10px;}.chroma{filter:chroma(color=FF6800);/* 去掉金黄色 */}</style>   </head><body><img src="tiger.gif">  <img src="tiger.gif" class="chroma"></body></html>

效果：

4、下落的阴影（DropShadow）& 阴影（Shadow）

代码：

<html><head><title>DropShadow & shadow</title><style>body{margin:12px;background:#000000;}.drop1{filter:dropshadow(color=#CCCCFF,offx=6,offy=4,positive=true);/* 下落阴影 */}.drop2{filter:dropshadow(color=#FFAAAA,offx=6,offy=4,positive=false);}.shadow{filter:shadow(color=#CCCCFF,direction=135);/* 阴影效果 */}</style>   </head><body><img src="fishing.gif"> <img src="fishing.gif" class="drop1"> <img src="fishing.gif" class="drop2"> <img src="fishing.gif" class="shadow"></body></html>

效果：

5、翻转变换（Flip）

代码：

<html><head><title>Flip翻转</title><style>body{margin:12px;background:#000000;}.flip1{filter:fliph;/* 水平翻转 */}.flip2{filter:flipv;/* 竖直翻转 */}.flip3{filter:flipv fliph;/* 水平、竖直同时翻转 */}</style>   </head><body><img src="村庄.jpg"><img src="村庄.jpg" class="flip1"><br><img src="村庄.jpg" class="flip2"><img src="村庄.jpg" class="flip3"></body></html>

效果：

6、光晕（Glow）& 遮罩（Mask）

代码：

<html><head><title>Glow & Mask</title><style>body{margin:12px;background:#000000;}.glow{filter:glow(color=#FFFFCC,strength=5);/* 发淡黄色的光 */}.mask{filter:mask(color=#8888FF);/* Mask遮罩 */}</style>   </head><body><img src="girl.gif"><img src="girl.gif" class="glow"><img src="girl.gif" class="mask"></body></html>

效果：

7、灰度（Gray）& 反色（Invert）& X射线（X-ray）

代码：

<html><head><title>Gray & Invert & Xray</title><style>body{background:url(bg1.jpg);  /*星空背景 */margin:20px;}.invert{filter:invert;/* 底片效果 */}.gray{filter:gray;/* 黑白图片 */}.xray{filter:xray;/* X光效果 */}</style>   </head><body><img src="村庄.jpg"><img src="村庄.jpg" class="invert"><img src="村庄.jpg" class="gray"><img src="村庄.jpg" class="xray"></body></html>

效果：

8、浮雕纹理（Emboss & Engrave）

代码：

<html><head><title>浮雕滤镜</title><style>body{margin:12px;background:#000000;}.emboss{filter:progid:DXImageTransform.microsoft.emboss(bias=0.4);/*凹陷效果*/}.engrave{filter:progid:DXImageTransform.microsoft.engrave(bias=0.4);/*凸出效果*/}</style>   </head><body><img src="村庄.jpg"> <img src="村庄.jpg" class="emboss"> <img src="村庄.jpg" class="engrave"></body></html>

效果：

9、波浪（Wave）

代码：

<title>Wave波浪滤镜</title><style>body{margin:12px;background-color:#e4f1ff;}span{font-family:Arial, Helvetica, sans-serif;height:100px; font-size:80px;font-weight:bold;color:#50a6ff;}span.wave1{filter:wave(add=0,freq=2,lightstrength=70,phase=75,strength=4);}span.wave2{filter:wave(add=0,freq=4,lightstrength=20,phase=25,strength=5);}span.wave3{filter:wave(add=1,freq=4,lightstrength=60,phase=0,strength=6);}</style>   </head><body><span class="wave1">波浪Wave</span><br><span class="wave2">波浪Wave</span><br><span class="wave3">波浪Wave</span></body></html>

效果：

三、高级滤镜

指需要配合JavaScript等脚本语言，能产生更多变幻效果的滤镜。

1、BlendTrans（渐隐变换）

图片淡入淡出代码：

<html><head><title>图片淡入淡出</title><style type="text/css">body{<span style="white-space:pre"></span>background:#000000;}img{<span style="white-space:pre"></span>filter:BlendTrans(duration=3);<span style="white-space:pre"></span>border:none;}</style>   </head><body><script language="javascript">function img1(x){    // 获取数组记录数<span style="white-space:pre"></span>this.length=x;}//申明数组并给数组元素赋值，也就是把图片的相对路径保存起来//若是图片较多，可增加数组元素的个数，//在这个例子中用了五张图片，所以数组元素个数为“5"。 <span style="white-space:pre"></span>iname=new img1(5);<span style="white-space:pre"></span>iname[0]="水果派对/苹果.jpg";<span style="white-space:pre"></span>iname[1]="水果派对/西瓜.jpg";<span style="white-space:pre"></span>iname[2]="水果派对/草莓.jpg";<span style="white-space:pre"></span>iname[3]="水果派对/橙子.jpg";<span style="white-space:pre"></span>iname[4]="水果派对/柠檬.jpg";<span style="white-space:pre"></span>var i=0;function play1(){<span style="white-space:pre"></span>// 演示变换效果<span style="white-space:pre"></span>if (i==4){ i=0; }<span style="white-space:pre"></span>//当进行到iname[4]时，返回iname[0]<span style="white-space:pre"></span>else{ i++; }<span style="white-space:pre"></span>tp1.filters[0].apply();<span style="white-space:pre"></span>//tp为图像的name，在<img>标记中定义<span style="white-space:pre"></span>tp1.src=iname[i];<span style="white-space:pre"></span>tp1.filters[0].play();<span style="white-space:pre"></span>mytimeout=setTimeout("play1()",2000);<span style="white-space:pre"></span>//设置演示时间，这里是以毫秒为单位的，所以“4000 ”是指每张图片的演示时间是4秒<span style="white-space:pre"></span>//这个时间值要大于滤镜中设置的转换时间值，这样当转换结束后还能停留一段时间，看清楚图片。}</script><p><img src="photo/04.jpg" name="tp1"></p><script language="javascript">play1();</script></body>

效果：

2、RevealTrans（变换）

CSS实现PPT幻灯片代码：

<html><head><title>CSS实现PPT幻灯片</title><style type="text/css">body{background:#000000;}img{filter:RevealTrans(Duration=3,Transition=23);border:none;}</style>   </head><body><script language="javascript">function img2(x){this.length=x;}jname=new img2(5);jname[0]="水果派对/苹果.jpg";jname[1]="水果派对/西瓜.jpg";jname[2]="水果派对/草莓.jpg";jname[3]="水果派对/橙子.jpg";jname[4]="水果派对/柠檬.jpg";var j=0;function play2(){if (j==4){ j=0; }else{ j++; }tp2.filters[0].apply();tp2.src=jname[j];tp2.filters[0].play();mytimeout=setTimeout("play2()",4000);}</script><p><img src="水果派对/柠檬.jpg" border="0" name="tp2"></p><script language="javascript">play2();</script></body>

效果：

3、Light（灯光）

舞台灯光代码：

<html><head><title>舞台灯光</title><style type="text/css">body{background-color:#000000;}td{filter:light;}</style>   </head><body><table><tr><td id="flttgt"><img src="mm.jpg"></td></tr></table><script language="javascript">var g_numlights=0;flttgt.onclick=keyhandler;//点击鼠标flttgt.onmousemove=mousehandler;//鼠标移动时function setlights(){flttgt.filters[0].clear();//先清空所有光源flttgt.filters[0].addcone(-10,- 10,5,275,370,0,0,150,60,10);//添加蓝色光源if (g_numlights>0){flttgt.filters[0].addcone (285,-10,5,0,370,150,0,0,60,10);//添加红色光源if (g_numlights>1)flttgt.filters[0].addcone (138,380,5,138,0,0,150,0,60,15);//添加绿色光}} function keyhandler(){g_numlights= (g_numlights+=1)%3;setlights();}function mousehandler(){x=(window.event.x-80);y=(window.event.y-80);flttgt.filters[0].movelight(0,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);//移动绿光}}setlights();</script></body>

效果：

四、学习心得

1、本身已经拥有很强大的功能，但是和别的语言结合起来将拥有更大更炫的效果。强强联合的效果就是绚丽多彩。

2、只对IE浏览器有效果，对其他的浏览器不兼容，有很大的局限性。要想立于不败之地，必须兼容。

2 0