【CSS+DIV】（1）——滤镜的应用
背景：牛腩中接触过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浏览器有效果，对其他的浏览器不兼容，有很大的局限性。要想立于不败之地，必须兼容。