滤镜的基本语法：
Filter: 滤镜名称（参数1，参数2）
滤镜所适用的元素
|
BODY |
网页主体元素 |
|
BUTTON |
设置窗口区域的按钮 |
|
DIV |
可在网页上用来定义区域范围 |
|
IMG |
通常用来将图片传入到网页中 |
|
INPUT |
输入窗体区域 |
|
MARQUEE |
移动字模效果 |
|
SPAN |
可在网页上定义区域范围 |
|
TABLE |
建立表格 |
|
TD |
表格中的单元格 |
|
TEXTAREA |
文本框区域 |
|
TFOOT |
多行输入文本框区域 |
|
TH |
表格中的标题单元格 |
|
THEAD |
表格中的标题 |
|
TR |
表格中的行 |
滤镜的种类：
l 视觉滤镜 只可达到静态的特效效果。只需在网页内使用CSS的定义语法即可。
l 转换滤镜 是用于两个画面进行转换是所使用的特效，将产生动态效果，除CSS外还需了解SCRIPT语言。
视觉滤镜
视觉滤镜的种类：
|
Alpha |
透明的渐变效果 |
|
Blur |
快速移动的模糊效果 |
|
Chroma |
特定颜色的透明效果 |
|
DropShadow |
阴影效果 |
|
FlipH |
水平翻转效果 |
|
FlipV |
垂直翻转效果 |
|
Glow |
边缘光晕效果 |
|
Gray |
灰度效果 |
|
Invert |
将颜色的饱和度以及亮度值完全反转，建立底片效果 |
|
Light |
加入光源投射效果 |
|
Mask |
屏蔽效果 |
|
Shadow |
渐层阴影效果 |
|
Wave |
加入波浪变形效果 |
|
Xray |
加入轮廓效果 |
Alpha滤镜
|
Opacity |
开始时的透明度。0（完全透明）~100（完全不透明） |
|
finishOpacity |
结束时的透明度。0（完全透明）~100（完全不透明） |
|
style |
渐变的形状。0：均匀；1：直线；2：圆形；3：矩形 |
|
startX |
渐变开始时的X坐标，度量单位为图片宽度的百分比 |
|
startY |
渐变开始时的Y坐标，度量单位为图片高度的百分比 |
|
finishX |
渐变结束时的X坐标，度量单位为图片宽度的百分比 |
|
finishY |
渐变结束时的Y坐标，度量单位为图片高度的百分比 |
Eg) style= “filter: Alpha(style=1)”
style=“filter:Alpha(style=1,opacity=100,finishopacity=0,startX=0,startY=0,finishX=50,
finishY=50)”>
Blur滤镜
|
add |
是否要显示原来的对象 |
0（不显示）1（显示）。默认值为1 |
|
direction |
动态模糊效果的方向 |
总单位为360度，0代表垂直向上，并以每45度为一个单位，默认值为270度 |
|
strength |
动态模糊效果的大小，表示有多少象素的大小会被影响 |
以整数来设置，默认值为5px |
Eg) style= “filter: blur(add=0,direction=90,strength=20)”
//不显示原来的图片，且以90度的方向模糊20px
Chroma滤镜
可以指定对象中的某个颜色为透明效果
|
color |
指定对象中要变为透明的颜色 |
以#rrggbb的格式设置 |
Eg) style= “filter: chroma(color=#ceff9c)”
Dropshadow滤镜
设置对象产生阴影效果
|
Color |
设置阴影颜色 |
以#rrggbb的格式 |
|
Offx |
阴影相对于原始对象的水平位移量 |
设置值为整数，单位为像素。若水平往右移，则正数；反之为负数。 |
|
Offy |
阴影相对于原始对象的垂直位移量 |
设置值为整数，单位为像素。若垂直往下移，则正数；反之为负数。 |
|
positive |
设置阴影的透明度 |
0（透明）1（不透明） |
Eg) style= “filter: dropshadow(color=pink,offx=-5,offy=-5,positive=1)”
FlipH, FlipV滤镜 (v: vertical垂直)
Eg) Style= “filter: FlipH” //水平翻转
Style= “filter: FlipV” //垂直翻转
Style= “filter: FlipH” //水平翻转
Glow滤镜
设置对象产生边缘光晕的模糊效果
|
Color |
设置边缘光晕的颜色 |
以#rrggbb的格式，或名称 |
|
strength |
设置边缘光晕的强度大小 |
设置值为1~255的整数 |
Eg) style= “filter: glow(color=yellow,strength=10)”
/*要在图片上设置文字或对象的阴影效果时，请记得该图片需存储为gif文件，且背景颜色设为透明，否则无法看出阴影效果。*/
Gray滤镜 (gray 灰色)
将对象中的颜色去除，以变成黑白的效果，gray滤镜并无参数
Eg) Style= “filter: gray”
Invert滤镜 （invert 使反转）
将颜色的 度以及亮度值完全反转，类似于底片效果，invert滤镜并无参数。
Eg) style= “filter: invert”
Light滤镜
Mask滤镜 (mask 掩饰，假面具)
设置对象的屏蔽效果，就好象印章一样印出模型的模样。
|
color |
设置屏蔽的颜色 |
以#rrggbb为格式，或名称 |
Eg) style= “filter: mask(color=#0000ff)” //将设置对象使用蓝色屏蔽效果
Shadow滤镜
除了具备DropShadow的阴影效果外，它还多了阴影渐变的特效。
|
Color |
设置阴影的颜色 |
以#rrggbb为格式，或名称 |
|
direction |
设置阴影的方向 |
总单位为360度，0代表垂直向上，并以每45度为一个单位，默认为225度 |
Wave滤镜
设置对象产生垂直的波浪效果
|
Add |
是否显示原来的对象 |
0（不显示）1（显示）默认是0 |
|
Freq |
设置出现在对象上的波浪数目 |
以正数设置 |
|
Strength |
设置波浪的振幅大小 |
单位为像素，数值为正数 |
|
Lightstrength |
设置波浪上光的照射强度 |
0（弱）~100（强） |
|
phase |
设置正玄波起始波形位置 |
0~100（相当将360度，划分为100份） |
Eg) style= “filter: wave(add=1,freq=3,strength=50,lightstrength=50,phase=100)”
//设置显示对象，有3个振幅为50像素的波浪，其光的强度为50，波浪的起始位置为100
Xray滤镜
让对象显示轮廓加亮，有点类似X光片的效果
Eg) style= “filter: xray”
转换滤镜
转换滤镜的种类：
融合转换滤镜(Blend Transition Filter)：此滤镜用于执行淡入或淡出
揭示转换滤镜(Reveal Transition Filter)：以揭示的方式进行转换
融合转换滤镜(Blend Transition Filter)
|
Duration |
滤镜转换的延迟时间 |
数字(秒为单位) |
|
Enabled |
滤镜效果是否打开 |
0（打开）1（关闭 ） |
|
Percent |
设置动态滤镜时，停止在进度的百分之几 |
整数 |
|
Status |
滤镜转换的状态 |
0（转换滤镜已停止） 1（转换滤镜已经调用） 2（转换滤镜正在执行） |
Eg) Style= “filter:blendTrans(duration=2)”
//2是指延迟时间为2秒
您还没有登录,请您登录后再发表评论