HTML、CSS、JavaScript 21.ppt

1、第21章滤镜特效的应用,21.1设置透明度alpha21.2添加模糊效果blur21.3设置水平/垂直翻转fliph/flipv21.4设置灰度21.5设置反转21.6设置X射线效果xray21.7设置波浪效果wave21.8设置阴影dropshadow21.9设置边缘光晕效果glow21.10设置遮罩mask21.11设置渐变阴影shadow21.12设定颜色透明chroma21.13小实例滤镜的综合应用,第21章滤镜特效的应用,基本语法,filter:滤镜属性（参数1，参数2，）,第21章滤镜特效的应用,语法说明,filter是滤镜属性选择符。滤镜属性包含有好多种，本章主要介绍的如表21-

2、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设置透明度alpha,实例代码,21.1设置透明度alpha,接上页,21.1设置透明度al

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

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

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

6、页,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,语法说明wave属性包含的参数说明,21.7设置波浪效果wa

7、ve,实例代码,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设置边缘光晕效果glow,基本语法,filter：glow（color=color，

8、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.10设置遮罩mask,接上页,21.10设置遮罩mask,网页效果,21.10设

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

10、,实例代码,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小实例滤镜的综合应用,网页