神马文学网HTML第五课CSS滤镜知识 (转载)
来源：百度文库 编辑：神马文学网 时间：2024/04/30 10:58:03
HTML学习班第五课
CSS滤镜知识
上节课我们学习了“文字和图片的移动”今天我们来说说：“CSS滤镜”：
CSS是Cascadin Style Sheets的简称，中文意思是“串联式排版样式”，也称“串接样式表”。它是统一HTML标准的“W3C”的工业合作组织于1996年5月制定的第一个排版样式标准，是对HTML功能的补充。CSS并非一种程序设计语言，它只是一种用于页面设计的、由设计者提供的手段，其主要功能是通过对HTML标记进行设定，对网页中的对象进行有效控制，使网页能够按照设计者的意愿来显示。
本文将介绍几个CSS滤镜(用来修饰文本），以此向大家展示CSS的强大功能。读者将在阅读代码和观赏文本特效中为CSS所制作出的文字特效而心动不已。请记住：CSS滤镜只不过是CSS众多的功能之一，可谓冰山一角而已，更多的功能请查阅有关CSS教程。
一、Alpha滤镜
代码：
Alpha滤镜效果
从效果中我们可以看出，Alpha滤镜使对象呈渐变透明的效果，其效果是由脚本中的filter:alpha(opacity=100,style=3)来决定的。其中：
opacity属性：设置透明度，取值0至100之间的任意数值，100表示完全不透明；
style属性：设置渐变风格，0表示均匀渐变，1表示线性渐变，2表示放射渐变，3表示直角渐变。
而width:100%则表示参与渐变的对象的宽度，通常都设置为100%。
LINE-HEIGHT:150%（线性高度）代表字与上面的距离数字越大，字就越向下。
例：Alpha滤镜效果
学习班朋友们好
效果图
朋友们看了效果图不难理解Alpha滤镜主要用于文字和图片的渐变效果，它主要是表现在以下几个方面：
1：0表示均匀渐变
2：1表示线性渐变
3：2表示放射渐变
4：3表示直角渐变
朋友们可以根据不同的效果设置style属性及width和LINE-HEIGHT各自的参数。就可得到朋友们想要的效果来。朋友们可以试一下！OK
二、Motion Blur滤镜
Motion Blur滤镜表现的是一种模糊效果。其ADD属性是用来确定是否在运动模糊中使用原有目标，其值为0和1，0表示“否”，用于文字，1表示“是”，用于图像；Direction属性是模糊移动的角度，其值为0至360度；Strength属性是模糊移动的距离。
以下是实例和代码：
朋友们这是投影效果
朋友们这是投影效果
朋友们从效果图中可以看到这种模糊效果有点象3D中的投影效果，注意以下几个属性就可以想怎么设置就怎么设置。
FONT-SIZE:30pt字体的大小
add=1表示模糊的目标。0表示“否”，用于文字，1表示“是”，用于图像
Direction属性是模糊移动的角度，其值为0至360度
Strength属性是模糊移动的距离
三、Drop Shadow滤镜
实例代码及效果：
朋友们看字的阴影有颜色了
朋友们看字的阴影有颜色了
它的主要特点：透明象素阴影。Drop Shadow滤镜主要产生重叠效果。其属性为：
color属性：设置影子文本的颜色；
offX和offY属性：影子文本下落的位移值；
Positive属性：指定透明象素阴影，布尔型，0为是，1为否。
Drop Shadow滤镜主要是阴影可以设置颜色。
四、Shadow滤镜
与Drop Shadow的影子特性不同，Shadow滤镜产生一种阴影效果，它的属性比较简单：
它的阴影是向下的
color属性：阴影颜色；
direction属性：阴影角度，值取0至360度。
实例：
它的阴影是向下的
五、Wave滤镜
此滤镜对过滤对象生成正弦波变形，造成一种变幻效果。内嵌属性：
add属性：布尔型，0或1，0表示将原始对象加入最后效果中，1则反之；
freq属性：决定显示的频率，即应出现多少个波形；
phrase属性：决定波形的形状，值取0至360之间；
strength属性：决定波形的振幅。
实例代码与效果：
字是不是扭曲了
字是不是扭曲了
六、Glow滤镜
Glow滤镜生成一种光晕效果。属性：
color属性：光晕颜色；strength：光晕的厚度。
实例代码与效果：
它的特点有光晕
它的特点有光晕
七、Flip滤镜
Flip滤滤镜主要是产生两种变换效果，即上下变换和左右变换。FlipV产生上下变换，FlipH产生左右变换。
冰山火焰
冰山火焰
冰山火焰
下面再给一个例子。这个例子用CSS的滤镜来改造WMP播放机插件的外观，代码和效果分别如下：
这一节的代码如下（红色部分就是CSS样式表代码）：
CSS滤镜知识
上节课我们学习了“文字和图片的移动”今天我们来说说：“CSS滤镜”：
CSS是Cascadin Style Sheets的简称，中文意思是“串联式排版样式”，也称“串接样式表”。它是统一HTML标准的“W3C”的工业合作组织于1996年5月制定的第一个排版样式标准，是对HTML功能的补充。CSS并非一种程序设计语言，它只是一种用于页面设计的、由设计者提供的手段，其主要功能是通过对HTML标记进行设定，对网页中的对象进行有效控制，使网页能够按照设计者的意愿来显示。
本文将介绍几个CSS滤镜(用来修饰文本），以此向大家展示CSS的强大功能。读者将在阅读代码和观赏文本特效中为CSS所制作出的文字特效而心动不已。请记住：CSS滤镜只不过是CSS众多的功能之一，可谓冰山一角而已，更多的功能请查阅有关CSS教程。
一、Alpha滤镜
代码：
Alpha滤镜效果
从效果中我们可以看出，Alpha滤镜使对象呈渐变透明的效果，其效果是由脚本中的filter:alpha(opacity=100,style=3)来决定的。其中：
opacity属性：设置透明度，取值0至100之间的任意数值，100表示完全不透明；
style属性：设置渐变风格，0表示均匀渐变，1表示线性渐变，2表示放射渐变，3表示直角渐变。
而width:100%则表示参与渐变的对象的宽度，通常都设置为100%。
LINE-HEIGHT:150%（线性高度）代表字与上面的距离数字越大，字就越向下。
例：Alpha滤镜效果
学习班朋友们好
效果图
朋友们看了效果图不难理解Alpha滤镜主要用于文字和图片的渐变效果，它主要是表现在以下几个方面：
1：0表示均匀渐变
2：1表示线性渐变
3：2表示放射渐变
4：3表示直角渐变
朋友们可以根据不同的效果设置style属性及width和LINE-HEIGHT各自的参数。就可得到朋友们想要的效果来。朋友们可以试一下！OK
二、Motion Blur滤镜
Motion Blur滤镜表现的是一种模糊效果。其ADD属性是用来确定是否在运动模糊中使用原有目标，其值为0和1，0表示“否”，用于文字，1表示“是”，用于图像；Direction属性是模糊移动的角度，其值为0至360度；Strength属性是模糊移动的距离。
以下是实例和代码：
朋友们这是投影效果
朋友们这是投影效果
朋友们从效果图中可以看到这种模糊效果有点象3D中的投影效果，注意以下几个属性就可以想怎么设置就怎么设置。
FONT-SIZE:30pt字体的大小
add=1表示模糊的目标。0表示“否”，用于文字，1表示“是”，用于图像
Direction属性是模糊移动的角度，其值为0至360度
Strength属性是模糊移动的距离
三、Drop Shadow滤镜
实例代码及效果：
朋友们看字的阴影有颜色了
朋友们看字的阴影有颜色了
它的主要特点：透明象素阴影。Drop Shadow滤镜主要产生重叠效果。其属性为：
color属性：设置影子文本的颜色；
offX和offY属性：影子文本下落的位移值；
Positive属性：指定透明象素阴影，布尔型，0为是，1为否。
Drop Shadow滤镜主要是阴影可以设置颜色。
四、Shadow滤镜
与Drop Shadow的影子特性不同，Shadow滤镜产生一种阴影效果，它的属性比较简单：
它的阴影是向下的
color属性：阴影颜色；
direction属性：阴影角度，值取0至360度。
实例：
它的阴影是向下的
五、Wave滤镜
此滤镜对过滤对象生成正弦波变形，造成一种变幻效果。内嵌属性：
add属性：布尔型，0或1，0表示将原始对象加入最后效果中，1则反之；
freq属性：决定显示的频率，即应出现多少个波形；
phrase属性：决定波形的形状，值取0至360之间；
strength属性：决定波形的振幅。
实例代码与效果：
字是不是扭曲了
字是不是扭曲了
六、Glow滤镜
Glow滤镜生成一种光晕效果。属性：
color属性：光晕颜色；strength：光晕的厚度。
实例代码与效果：
它的特点有光晕
它的特点有光晕
七、Flip滤镜
Flip滤滤镜主要是产生两种变换效果，即上下变换和左右变换。FlipV产生上下变换，FlipH产生左右变换。
冰山火焰
冰山火焰
冰山火焰
冰山火焰
下面再给一个例子。这个例子用CSS的滤镜来改造WMP播放机插件的外观，代码和效果分别如下：
这一节的代码如下（红色部分就是CSS样式表代码）：
HTML第五课CSS滤镜知识 (转载)
HTML第五课CSS滤镜知识
精通 CSS 滤镜
CSS滤镜详解
CSS：HTML结构化
图片CSS滤镜效果---灰度
简明 HTML CSS 开发规范
简明 HTML CSS 开发规范
css滤镜之Chroma属性简介
CSS滤镜 即FILTER的用法详解
图片CSS滤镜--Ｘ光效果
图片CSS滤镜---上下颠倒效果代码
图片CSS滤镜---浮雕效果代码
图片CSS滤镜---模糊效果代码
图片CSS滤镜---水中倒影效果代码
CSS高级篇(一):滤镜属性语法
CSS高级篇(三):滤镜效果一
CSS高级篇(四):滤镜效果二
PHOTOSHOP外挂滤镜知识
htmlcxx - html and css APIs for C++
CSS For Beginners - The Code Project - HTML /...
HTML元素CSS要注意的
实用HTML，CSS和JavaScript速查表
实用HTML，CSS和JavaScript速查表