文字特效

    我们平常在浏览网页的时候，经常会看到一些显示特效的文字，像这样的特效文字大多数都是利用css样式来实现的。在这里，我向大家介绍几种文字的特效。

1、文字的发光效果

    主要通过css样式的glow滤镜属性实现的，filter:glow(color=color_value,Strength=value)

Color:表示边缘光晕的颜色

Strength：表示边缘光晕的强度大小，范围在1~255之间。

 

代码：css样式

<style type="text/css">

.tb{

font-size: 40px;

filter:glow(color=skyblue,direction=2);

font-family: 华文行楷;

}

</style>

 

2、文字的阴影效果

    主要通过css样式的dropshadow滤镜属性实现的，filter:glow(color=color_value,offx=value,offy=value,positive=value);

Color:表示阴影的颜色

Offx：x轴方向阴影的偏移量。

Offy：y轴方向阴影的偏移量。

Positove：取值为false或true，true表示不透明像素建立可见的阴影，false表示为透明像素可见阴影。若不写表示为默认，默认为true。

 

代码：css样式

.tb1{

font-size: 40px;

filter:dropshadow(color=green,offx=3,offy=3);

font-family: 华文隶书;

}

3、文字的渐变阴影效果

    主要通过css样式的shadow滤镜属性实现的，filter:glow(color=color_value,direction=value);

Color：阴影的颜色。

Direction：设定渐变阴影的方向，渐变阴影是按照顺时针方向进行的，0º表示垂直向上，之后每45º为一个单位，默认值为270º。

 

.tb2{

font-size: 40px;

filter:shadow(color=skyblue,direction=135);

font-family: 黑体;

}

4、文字的图案填充效果

    主要通过dropshadow和chroma滤镜相结合来实现。Chroma样式

Filter:chroma(color=color_value);

Color:透明的颜色，如color为#ffcc00，则滤镜作用范围内的所有为#ffcc00的颜色都将变为透明，包括图片的像素。

 

<div style="background-image: url(ahcme.jpg);width: 100%">

<div style="filter:chroma(color=#cccccc)dropshadow(color=#777777,offx=-1,offy=-1,positive=2);

color:#cccccc;background-color: #ffffff;width: 100%;font: bold 50pt 黑体;" >

文字的图案填充效果

</div>

 

5、文字的探照灯效果

    主要通过light滤镜相结合来实现。Chroma样式

filter:light;

在javascript中，可以使用document对象来获得元素的light滤镜对象，然后通过调用light滤镜对象中的方法来实现文字的发光效果，light滤镜中包含的方法如下：

方法	说明
addAmbient	加入包围的光源
addCone	加入锥形光源
addPoint	加入点光源
changcolor	改变光的颜色
changstrength	改变光源的强度
clear	清除所有的光源
moveLight	移动光源

 

    还有关于其他的各种问题特效，等有时间整理出来之后再奉献给各位！