|
标题：用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>欢迎光临六安气象局</B></FONT>从效果中我们可以看出，Alpha滤镜使对象呈渐变透明的效果，其效果是由脚本中的filter:alpha(opacity=100,style=3)来决定的。其中： opacity属性：设置透明度，取值0至100之间的任意数值，100表示完全不透明； 歗答?k*p 而width:100%则表示参与渐变的对象的宽度，通常都设置为100%。
二、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>
三、Drop Shadow滤镜 Drop Shadow滤镜主要产生重叠效果。其属性为： color属性：设置影子文本的颜色； 慙o貼愴? 实例代码及效果： 欢迎光临六安气象局 <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>
四、Shadow滤镜 与Drop Shadow的影子特性不同，Shadow滤镜产生一种阴影效果，它的属性比较简单： color属性：阴影颜色； vR?UU銇 实例： 欢迎光临六安气象局 <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则反之； 皔? X緉張 实例代码与效果： 欢迎光临六安气象局<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> +.???D
欢迎光临六安气象局 <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> H?g?(埈u |
|
欢迎光临六安气象局！
代码： <FONT color=#ff00ff> Z?疲+J? |
| 农网中心！ ?w憋?? 楗蚗昭M諄? t?I8kJ魧 代码： <CENTER><FONT style="FONT-SIZE: 60pt; FILTER:
shadow(color=black); WIDTH: 87.45%; COLOR: #e4dc9b; LINE-HEIGHT: 150%;
FONT-FAMILY: 华文彩云; HEIGHT: 120px"><B> 眸?煓??
<P align=center>农网中心！</P></B></FONT></CENTER> |
| 六安市农网中心 代码： <DIV align=center><FONT
style="FONT-SIZE: 55pt; FILTER: shadow(color=#AF0530); WIDTH: 100%;
COLOR: #f90b46; LINE-HEIGHT: 150%; FONT-FAMILY: 隶书"> -俣l!]?Gz
<P align=center><B>六安市农网中心</B></P></FONT></DIV> 觥2??O <DIV align=left> </DIV> |
| ??O?? 腓酱?捏? 鬋??Qo <MARQUEE scrollAmount=2 direction=down height=60> ??鷨? <CENTER><FONT face=黑体 color=#ff0000 size=7><B>六安市农网中心</FONT></CENTER></B></MARQUEE></CENTER> 葛颽驺22f <CENTER> 9锝竟葧g? <MARQUEE scrollAmount=2 direction=up height=60> U {鯉@姸k <CENTER><FONT face=黑体 color=#ff0000 size=7><B>六安市农网中心</FONT></B></CENTER></MARQUEE></CENTER> ?3DH翮锆? <DIV align=left> </DIV> |
| 驸&嵹O?? 欢迎光临 农网中心 代码： <DIV style="FILTER: shadow(color=#FF4500, strength=50); WIDTH: 900px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 100pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文彩云 color=#fff000>欢迎光临农网中心</FONT></DIV> |
| ?捒S媞3讒S 瘣K惉?鯉 ?捙磆?h?
代码： <P align=center><FONT
style="FONT-SIZE: 90pt; FILTER: wave(add=0,lightstrength=10,strength=8,freq=6,phrase=10);
WIDTH: 100%; COLOR: #ff00ff; LINE-HEIGHT: 150%; FONT-FAMILY: 华文行楷"> 祉搇N鉗 |
| ??; T漠謯@?<} 剘:5薅%? 代码： <MARQUEE direction=right>
N恄?芢[S? |
| 壻F[? ?0 |
| |