html+css+javascript 标准实例教程(第二版)21.ppt

1、实例版,第21章 滤镜特效的应用,21.1 设置透明度alpha 21.2 添加模糊效果blur 21.3 设置水平/垂直翻转fliph/flipv 21.4 设置灰度 21.5 设置反转 21.6 设置X射线效果xray 21.7 设置波浪效果wave 21.8 设置阴影dropshadow 21.9 设置边缘光晕效果glow 21.10 设置遮罩mask 21.11 设置渐变阴影shadow 21.12 设定颜色透明chroma 21.13 小实例滤镜的综合应用,第21章 滤镜特效的应用,基本语法,filter:滤镜属性（参数1，参数2，）,第21章 滤镜特效的应用,语法说明, filte

2、r是滤镜属性选择符。 滤镜属性包含有好多种，本章主要介绍的如表21-1。 参数值就是属性值，用来反映属性效果的，具体各个滤镜属性的参数值将在后面详细介绍。,第21章 滤镜特效的应用,表21-1 滤镜属性表,21.1 设置透明度alpha,基本语法,filter:alpha(opacity=opacity，finishopacity=finishopacity，style=style，startx=startx，starty=starty，finishx=finishx，finishy=finishy),21.1 设置透明度alpha,语法说明alpha属性包含的参数说明,21.1 设置透明度a

3、lpha,实例代码,21.1 设置透明度alpha,接上页,21.1 设置透明度alpha,接上页,21.1 设置透明度alpha,网页效果,21.1 设置透明度alpha,提示,在运行含有滤镜属性的代码时，浏览器会出现一个信息栏提示您Internet Explorer阻止了一些不安全的内容。这时您只要单击信息栏的“确定”按钮，然后再右键单击靠近浏览器顶端的信息，从快捷菜单选择“允许阻止的内容”即可看到滤镜的效果。,21.2 添加模糊效果blur,基本语法,filter：blur（add=add，direction=direction，strength=strength）,21.2 添加模糊效

4、果blur,语法说明, blue属性包含的参数说明见表21-3。 动态模糊的方向是以45为一个单位，所以如果设置的方向度数不是45的倍数的话，浏览器就会以其最接近的45倍数来设置模糊度数。如，设置了direction=160，实际浏览器是以180来显示模糊方向的。,21.2 添加模糊效果blur,表21-3 blue滤镜参数说明,21.2 添加模糊效果blur,实例代码,21.2 添加模糊效果blur,接上页,21.2 添加模糊效果blur,网页效果,21.3 设置水平/垂直翻转fliph/flipv,基本语法,filter：fliph filter：flipv,21.3 设置水平/垂直翻转f

5、liph/flipv,语法说明, fliph和flipv两个属性都没有参数，可以直接引用。,21.3 设置水平/垂直翻转fliph/flipv,实例代码,21.3 设置水平/垂直翻转fliph/flipv,接上页,21.3 设置水平/垂直翻转fliph/flipv,网页效果,21.3 设置水平/垂直翻转fliph/flipv,提示,在实际应用过程中，水平翻转和垂直翻转滤镜属性也可以同时使用。 其语法为：filter：fliph flipv;两个属性中间用空格隔开，代表水平垂直翻转。,21.4 设置灰度,基本语法,filter：gray,21.4 设置灰度,实例代码,21.4 设置灰度,接上页,

6、21.4 设置灰度,网页效果,21.6 设置X射线效果xray,基本语法,filter：xray,21.6 设置X射线效果xray,实例代码,21.6 设置X射线效果xray,接上页,21.6 设置X射线效果xray,网页效果,21.6 设置X射线效果xray,实例代码,21.6 设置X射线效果xray,接上页,21.6 设置X射线效果xray,网页效果,21.7 设置波浪效果wave,基本语法,filter：wave（add=true（false），freq=频率，lightstrength=光强，phase=偏移量，strength=强度）,21.7 设置波浪效果wave,语法说明 wav

7、e属性包含的参数说明,21.7 设置波浪效果wave,实例代码,21.7 设置波浪效果wave,接上页,21.7 设置波浪效果wave,网页效果,21.8 设置阴影dropshadow,基本语法,filter：dropshadow（color=color，offx=offx，offy=offy，positive=positive）,21.8 设置阴影dropshadow,语法说明dropshadow属性包含的参数说明,21.8 设置阴影dropshadow,实例代码,21.8 设置阴影dropshadow,接上页,21.8 设置阴影dropshadow,网页效果,21.9 设置边缘光晕效果gl

8、ow,基本语法,filter：glow（color=color，strength=strength）,21.9 设置边缘光晕效果glow,语法说明glow属性包含的参数说明,21.9 设置边缘光晕效果glow,实例代码,21.9 设置边缘光晕效果glow,接上页,21.9 设置边缘光晕效果glow,网页效果,21.10 设置遮罩mask,基本语法,filter：mask（color=颜色值）,21.10 设置遮罩mask,语法说明,这里的颜色值可以使用颜色名称或RGB值，而且color参数值的颜色正是遮罩后所显示的颜色，很类似用印章印出的效果。,21.10 设置遮罩mask,实例代码,21.1

9、0 设置遮罩mask,接上页,21.10 设置遮罩mask,网页效果,21.10 设置遮罩mask,效果说明,图21-12中上下两段文字应用了两个层，但只给第二个层内容应用了所定义的样式，而且在样式中定义了遮罩的颜色为蓝色，所以图中第二段文字的颜色被蓝色覆盖，看到的是覆盖后的效果。,21.11 设置渐变阴影shadow,基本语法,filter：shadow（color=color，direction=direction）,21.11 设置渐变阴影shadow,语法说明, color设置渐变阴影的颜色。 direction设置渐变阴影的方向，从0开始，每45为一个单位，默认值是225。和滤镜属性

10、blur模糊效果的direction参数值设置方法一样。,21.11 设置渐变阴影shadow,实例代码,21.11 设置渐变阴影shadow,接上页,21.11 设置渐变阴影shadow,网页效果,21.12 设定颜色透明chroma,基本语法,filter：chroma（color=颜色值）,21.12 设定颜色透明chroma,语法说明,参数color的颜色值可以使用颜色名称或RGB值，并且这个颜色就是要设置为透明的颜色。,21.12 设定颜色透明chroma,实例代码,21.12 设定颜色透明chroma,接上页,21.12 设定颜色透明chroma,网页效果,21.12 设定颜色透明chroma,效果说明,图21-15是没有设置颜色透明前的效果，图21-16是设置了红色为透明颜色的效果，看不到了文字“电子工业出版社”，因为该文字颜色是红色的，所以变为了透明色。虽然看不见透明颜色的效果，但它本身还是占用空间的，如图21-17是用鼠标选取后的效果。,21.13 小实例滤镜的综合应用,实例代码,21.13 小实例滤镜的综合应用,接上页,21.13 小实例滤镜的综合应用,