我們平常在瀏覽網(wǎng)頁的時候，經(jīng)常會看到一些顯示特效的文字，像這樣的特效文字大多數(shù)都是利用css
樣式來實(shí)現(xiàn)的。在這里，我向大家介紹幾種文字的特效。
1、文字的發(fā)光效果
主要通過css樣式的glow濾鏡屬性實(shí)現(xiàn)的，filter:glow(color=color_value,Strength=value)
Color:表示邊緣光暈的顏色
Strength：表示邊緣光暈的強(qiáng)度大小，范圍在1~255之間。
代碼：css樣式
<style type="text/css">
.tb{
font-size: 40px;
filter:glow(color=skyblue,direction=2);
font-family: 華文行楷;
}
</style>
2、文字的陰影效果
主要通過css樣式的dropshadow濾鏡屬性實(shí)現(xiàn)的，filter:glow(color=color_value,offx=value,offy=value,positive=value);
Color:表示陰影的顏色
Offx：x軸方向陰影的偏移量。
Offy：y軸方向陰影的偏移量。
Positove：取值為false或true，true表示不透明像素建立可見的陰影，false表示為透明像素可見陰影。若不寫表示為默認(rèn)，默認(rèn)為true。
代碼：css樣式
.tb1{
font-size: 40px;
filter:dropshadow(color=green,offx=3,offy=3);
font-family: 華文隸書;
}
3、文字的漸變陰影效果
主要通過css樣式的shadow濾鏡屬性實(shí)現(xiàn)的，filter:glow(color=color_value,direction=value);
Color：陰影的顏色。
Direction：設(shè)定漸變陰影的方向，漸變陰影是按照順時針方向進(jìn)行的，0º表示垂直向上，之后每45º為一個單位，默認(rèn)值為270º。
.tb2{
font-size: 40px;
filter:shadow(color=skyblue,direction=135);
font-family: 黑體;
}
4、文字的圖案填充效果
主要通過dropshadow和chroma濾鏡相結(jié)合來實(shí)現(xiàn)。Chroma樣式
Filter:chroma(color=color_value);
Color:透明的顏色，如color為#ffcc00，則濾鏡作用范圍內(nèi)的所有為#ffcc00的顏色都將變?yōu)橥该鳎▓D片的像素。
<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濾鏡相結(jié)合來實(shí)現(xiàn)。Chroma樣式
filter:light;
在javascript中，可以使用document對象來獲得元素的light濾鏡對象，然后通過調(diào)用light濾鏡對象中的方法來實(shí)現(xiàn)文字的發(fā)光效果，light濾鏡中包含的方法如下：
|
方法 |
說明 |
|
addAmbient |
加入包圍的光源 |
|
addCone |
加入錐形光源 |
|
addPoint |
加入點(diǎn)光源 |
|
changcolor |
改變光的顏色 |
|
changstrength |
改變光源的強(qiáng)度 |
|
clear |
清除所有的光源 |
|
moveLight |
移動光源 |
還有關(guān)于其他的各種問題特效，等有時間整理出來之后再奉獻(xiàn)給各位！