您好!欢迎你光临用CSS滤镜修饰文字_贝贝动画网|Flash动画乐园!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>边框素材>>>用CSS滤镜修饰文字
用CSS滤镜修饰文字
发表日期:2010/9/3 6:11:00 出处:未知 作者:未知 发布人:BEIBEI666 已被访问 3163

CSSCascadin 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表示完全不透明;
style属性:设置渐变风格,0表示均匀渐变,1表示线性渐变,2表示放射渐变,3表示直角渐变。

而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属性:设置影子文本的颜色;
offX和offY属性:影子文本下落的位移值;
Positive属性:指定透明象素阴影,布尔型,0为是,1为否。

实例代码及效果:

欢迎光临贝贝网站!

<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属性:阴影颜色;
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>

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

琼icp备09005167号


贝贝动画网|Flash动画乐园 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话:13881031689 联系人:贝贝

琼icp备09005167