CSS滤镜示范(filter)附源代码(静态滤镜)

filter视觉滤镜的种类

Alpha(透明度)	Blur(模糊)	Chroma(指定颜色透明)	DropShadow(不透明阴影)	FlipH&FlipV(翻转)	Glow(边缘光晕)	Gray(去色)	Invert(底片效果)	Mask(遮照效果)	filter:Shadow(影子)	Wave(波浪)	Xray(轮廓加亮)

Alpha:

原始图片	开始透明度(opacity):100 结束透明度(finishopacity):0 开始位置(startX,startY):(0,0) 结束位置(finishX,finishY):(50,50)	开始透明度(opacity):70 结束透明度(finishopacity):20 开始位置(startX,startY):(0,0) 结束位置(finishX,finishY):(50,50)

Blur:

原始图片	显示原来的图片，且以270度的方向模糊20px	不显示原来的图片，且以90度方向模糊20px

Chroma

原始图片	Chroma指定的字体颜色(我是CCHXP)变为透明

DropShadow

原始图片	设置阴影颜色为淡绿色，往右移5px，往下移5px，且阴影呈不透明的效果。	设置阴影颜色为粉红色，往左移5px，往上移5px，且阴影呈不透明的效果。

FlipH&FlipV

原始图片	设置图片水平翻转FlipH	设置图片垂直翻转FlipV

Glow

原始图片	设置图片光晕颜色为黄色，强度为10	设置图片光晕颜色为红色，强度为20

Gray

原始图片	将图片的颜色去除，以达到灰色效果

Invert

原始图片	设置图片颜色呈底片效果

Mask

原始图片	设置图片的屏蔽颜色为蓝色

Shadow

原始图片	设置图片阴影颜色为绿色，往225度方向	设置图片阴影颜色为红色，往135度方向

Wave

原始图片	不显示原始图片，有5个振幅为20象素的波浪，其光的强度为30，波浪其始位置为50	显示原始图片，有3个振幅为50象素的波浪，其光的强度为50，波浪起始位置为100

Xray

原始图片	X光照片的效果

Gray&Invert&Xray比较

原始图片	Gray效果	Invert效果	Xray效果

[Ctrl+A 全选 注: 如需引入外部Js需刷新才能执行]