文字特效

文字特效

   我们平常在浏览网页的时候,经常会看到一些显示特效的文字,像这样的特效文字大多数都是利用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:表示阴影的颜色

Offxx轴方向阴影的偏移量。

Offyy轴方向阴影的偏移量。

Positove:取值为falsetruetrue表示不透明像素建立可见的阴影,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、文字的图案填充效果

    主要通过dropshadowchroma滤镜相结合来实现。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

移动光源

 

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

你可能感兴趣的:(文字特效)