2012年10月26日

             我們平常在瀏覽網頁的時候,經常會看到一些顯示特效的文字,像這樣的特效文字大多數都是利用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

          移動光源

           

              還有關于其他的各種問題特效,等有時間整理出來之后再奉獻給各位!

          posted @ 2012-10-26 17:45 ChuanQi‘s BLOG 閱讀(205) | 評論 (0)編輯 收藏

          導航

          <2012年10月>
          30123456
          78910111213
          14151617181920
          21222324252627
          28293031123
          45678910

          統計

          常用鏈接

          留言簿

          隨筆檔案

          搜索

          最新評論

          閱讀排行榜

          評論排行榜

          主站蜘蛛池模板: 汽车| 慈溪市| 滨州市| 探索| 丽水市| 尚志市| 台东县| 东平县| 彭州市| 略阳县| 砚山县| 日土县| 乐东| 繁峙县| 辽阳市| 济阳县| 五莲县| 鄂托克前旗| 会昌县| 苏尼特右旗| 阜平县| 和龙市| 阳泉市| 喀什市| 武宣县| 文成县| 五原县| 正宁县| 诏安县| 莫力| 黄石市| 香港 | 德昌县| 宜春市| 肃宁县| 通城县| 元氏县| 金华市| 池州市| 巴南区| 开远市|