HTML第五课CSS滤镜知识

HTML学习班第五课

CSS滤镜知识

 

上节课我们学习了“文字和图片的移动”今天我们来说说：“CSS滤镜”：

CSS是Cascadin Style Sheets的简称，中文意思是“串联式排版样式”，也称“串接样式表”。它是统一HTML标准的“W3C”的工业合作组织于1996年5月制定的第一个排版样式标准，是对HTML功能的补充。CSS并非一种程序设计语言，它只是一种用于页面设计的、由设计者提供的手段，其主要功能是通过对HTML标记进行设定，对网页中的对象进行有效控制，使网页能够按照设计者的意愿来显示。

本文将介绍几个CSS滤镜(用来修饰文本），以此向大家展示CSS的强大功能。读者将在阅读代码和观赏文本特效中为CSS所制作出的文字特效而心动不已。请记住：CSS滤镜只不过是CSS众多的功能之一，可谓冰山一角而已，更多的功能请查阅有关CSS教程。

一、Alpha滤镜
代码：

<FONT style="FONT-SIZE:30pt;filter:alpha(opacity=100,style=3);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>Alpha滤镜效果</B></FONT>

从效果中我们可以看出，Alpha滤镜使对象呈渐变透明的效果，其效果是由脚本中的filter:alpha(opacity=100,style=3)来决定的。其中：

opacity属性：设置透明度，取值0至100之间的任意数值，100表示完全不透明；
style属性：设置渐变风格，0表示均匀渐变，1表示线性渐变，2表示放射渐变，3表示直角渐变。

而width:100%则表示参与渐变的对象的宽度，通常都设置为100%。

LINE-HEIGHT:150%（线性高度）代表字与上面的距离数字越大，字就越向下。

例：<FONT style="FONT-SIZE:30pt;filter:alpha(opacity=100,style=3);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>Alpha滤镜效果</B></FONT>

学习班朋友们好

效果图

    朋友们看了效果图不难理解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属性是模糊移动的距离。

以下是实例和代码：

<FONT style="FONT-SIZE:30pt;filter:blur(add=1,direction=30,strength=5);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>朋友们这是投影效果</B></FONT>

朋友们这是投影效果

   朋友们从效果图中可以看到这种模糊效果有点象3D中的投影效果，注意以下几个属性就可以想怎么设置就怎么设置。

FONT-SIZE:30pt字体的大小
add=1表示模糊的目标。0表示“否”，用于文字，1表示“是”，用于图像
Direction属性是模糊移动的角度，其值为0至360度
Strength属性是模糊移动的距离

三、Drop Shadow滤镜

实例代码及效果：

朋友们看字的阴影有颜色了

<FONT style="FONT-SIZE:30pt;filter:dropshadow(color=lightgreen,offX=5,offY=3,Positive=1);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>朋友们看字的阴影有颜色了</B></FONT>

它的主要特点：透明象素阴影。Drop Shadow滤镜主要产生重叠效果。其属性为：

color属性：设置影子文本的颜色；
offX和offY属性：影子文本下落的位移值；
Positive属性：指定透明象素阴影，布尔型，0为是，1为否。

Drop Shadow滤镜主要是阴影可以设置颜色。

四、Shadow滤镜

与Drop Shadow的影子特性不同，Shadow滤镜产生一种阴影效果，它的属性比较简单：

它的阴影是向下的

color属性：阴影颜色；
direction属性：阴影角度，值取0至360度。

实例：

<FONT style="FONT-SIZE:30pt;filter:shadow(color=black,direction=180);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>它的阴影是向下的</B></FONT>

五、Wave滤镜

此滤镜对过滤对象生成正弦波变形，造成一种变幻效果。内嵌属性：

add属性：布尔型，0或1，0表示将原始对象加入最后效果中，1则反之；
freq属性：决定显示的频率，即应出现多少个波形；
phrase属性：决定波形的形状，值取0至360之间；
strength属性：决定波形的振幅。

实例代码与效果：

字是不是扭曲了

<FONT style="FONT-SIZE:30pt;filter:wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>字是不是扭曲了</B></FONT>

六、Glow滤镜

Glow滤镜生成一种光晕效果。属性：

color属性：光晕颜色；strength：光晕的厚度。

实例代码与效果：

它的特点有光晕

<FONT style="FONT-SIZE:30pt;filter:glow(color=gray,strength=4);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>它的特点有光晕</B></FONT>

七、Flip滤镜

Flip滤滤镜主要是产生两种变换效果，即上下变换和左右变换。FlipV产生上下变换，FlipH产生左右变换。

冰山火焰

<FONT style="FONT-SIZE:30pt;filter:FlipV(color=silver);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>冰山火焰</B></FONT>

冰山火焰

<p align=right><FONT style="FONT-SIZE:30pt;filter:FlipH(color=silver);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>冰山火焰</B></FONT></p>

    下面再给一个例子。这个例子用CSS的滤镜来改造WMP播放机插件的外观，代码和效果分别如下：
这一节的代码如下（红色部分就是CSS样式表代码）：

<p align=center><EMBED id="wmp01" style="FILTER: invert(); WIDTH: 400px;HEIGHT: 50px" src="音乐地址" type=audio/mpeg volume="0" loop="true" autostart="true" ShowStatusBar="1"></p>