3.5 文字特效

在瀏覽網(wǎng)頁(yè)時(shí)，經(jīng)常會(huì)看到一些顯示特效的文字，這些特效文字多數(shù)都是利用CSS樣式來(lái)實(shí)現(xiàn)的。下面將通過(guò)幾個(gè)例子來(lái)介紹如何使用CSS樣式來(lái)設(shè)置文字的特效。

實(shí)例076 文字的發(fā)光效果

光盤位置：光盤\MR\03\076

初級(jí)

實(shí)用指數(shù)：

實(shí)例說(shuō)明

在設(shè)計(jì)網(wǎng)站時(shí)，為了體現(xiàn)網(wǎng)站的個(gè)性，可以設(shè)計(jì)網(wǎng)站導(dǎo)航或其他內(nèi)容的文字發(fā)光效果。本實(shí)例將通過(guò)CSS樣式來(lái)設(shè)置文字的發(fā)光特效，運(yùn)行結(jié)果如圖3.24所示。

圖3.24 文字的發(fā)光效果

關(guān)鍵技術(shù)

本實(shí)例主要通過(guò)CSS樣式的glow濾鏡屬性實(shí)現(xiàn)，其語(yǔ)法格式如下：

        {filter: glow(color=color_value, Strength=value)}

參數(shù)說(shuō)明

? color：表示邊緣光暈的顏色。

? Strength：表示邊緣光暈的強(qiáng)度大小，范圍在1～255之間。

設(shè)計(jì)過(guò)程

（1）新建index.htm頁(yè)面，編寫文字發(fā)光效果的CSS樣式，關(guān)鍵代碼如下：

        <style>
         .tb{
              font-size:40px;
              filter:glow(color=skyblue, direction=2);
              font-family: 華文行楷；
        }
        </style>

（2）在頁(yè)面中添加表格，并使用以上定義的CSS樣式，關(guān)鍵代碼如下：

        <table class="tb">
        <tr>
              <td>
                  明日科技論壇
              </td>
        </tr>
        </table>

秘笈心法

為了提高開(kāi)發(fā)效率，可以將glow濾鏡的樣式代碼寫到．css樣式文件中，在需要加入特效的文字中，直接通過(guò)<link>標(biāo)簽引用CSS文字濾鏡樣式文件即可，避免每次都編寫該文字特效的代碼。

實(shí)例077 文字的陰影效果

光盤位置：光盤\MR\03\077

初級(jí)

實(shí)用指數(shù)：

實(shí)例說(shuō)明

在設(shè)計(jì)網(wǎng)站時(shí)，為了體現(xiàn)網(wǎng)站的個(gè)性，可以設(shè)計(jì)網(wǎng)站內(nèi)容的文字陰影效果。本實(shí)例將通過(guò)CSS樣式來(lái)設(shè)置文字的陰影效果，運(yùn)行結(jié)果如圖3.25所示。

圖3.25 文字的陰影效果

關(guān)鍵技術(shù)

本實(shí)例主要通過(guò)CSS樣式的dropshadow濾鏡屬性實(shí)現(xiàn)，其濾鏡語(yǔ)法格式如下：

        {filter: dropshadow(color=color_value, offx=value, offy=value, positive=value)}

參數(shù)說(shuō)明

? color：陰影的顏色。

? offx:x軸方向陰影的偏移量。

? offy:y軸方向陰影的偏移量。

? positive：取值為true或false,true表示為不透明像素建立可見(jiàn)的陰影，false表示為透明像素建立可見(jiàn)的陰影。

設(shè)計(jì)過(guò)程

（1）新建index.htm頁(yè)面，編寫文字陰影效果的CSS樣式，關(guān)鍵代碼如下：

        <style>
         .tb{
              font-size:40px;
              filter:dropshadow(color=green, offx=3, offy=3);
              font-family: 華文隸書；
        }
        </style>

（2）在頁(yè)面中添加表格，并使用以上定義的CSS樣式，關(guān)鍵代碼如下：

        <table class="tb">
        <tr>
              <td>
                  明日科技論壇
              </td>
        </tr>
        </table>

秘笈心法

在IE 10及以上版本中，如果要實(shí)現(xiàn)文字的陰影效果，可以使用CSS 3提供的text-shadow屬性來(lái)實(shí)現(xiàn)。

實(shí)例078 文字的漸變陰影效果

光盤位置：光盤\MR\03\078

初級(jí)

實(shí)用指數(shù)：

實(shí)例說(shuō)明

在設(shè)計(jì)網(wǎng)站時(shí)，為了體現(xiàn)網(wǎng)站的個(gè)性，可以設(shè)計(jì)網(wǎng)站內(nèi)容的文字漸變陰影效果。本實(shí)例將通過(guò)CSS樣式來(lái)設(shè)置文字的漸變陰影效果，運(yùn)行結(jié)果如圖3.26所示。

圖3.26 文字的漸變陰影效果

關(guān)鍵技術(shù)

本實(shí)例主要通過(guò)CSS樣式的shadow濾鏡屬性實(shí)現(xiàn)，其語(yǔ)法格式如下：

        {filter: shadow(color=color_value, direction=value)}

參數(shù)說(shuō)明

? color：陰影的顏色。

? direction：設(shè)定漸變陰影的方向，漸變陰影是按順時(shí)針?lè)较蜻M(jìn)行的，0°表示垂直向上，然后每45°為一個(gè)單位，默認(rèn)值為270°。

設(shè)計(jì)過(guò)程

（1）新建index.htm頁(yè)面，編寫文字漸變陰影效果的CSS樣式，關(guān)鍵代碼如下：

        <style>
         .tb{
              font-size:40px;
              filter:shadow(color=skyblue, direction=135);
              font-family: 黑體；
        }
        </style>

（2）在頁(yè)面中添加表格并應(yīng)用以上定義的CSS樣式，關(guān)鍵代碼如下：

        <table class="tb">
        <tr>
              <td>
                  明日科技論壇
              </td>
        </tr>
        </table>

秘笈心法

為了提高開(kāi)發(fā)效率，可以將shadow濾鏡的樣式代碼寫到．css樣式文件中，在需要加入特效的文字中，直接通過(guò)<link>標(biāo)簽引用CSS文字濾鏡樣式文件即可，避免每次都編寫該文字特效的代碼。

實(shí)例079 文字的圖案填充效果

光盤位置：光盤\MR\03\079

高級(jí)

實(shí)用指數(shù)：

實(shí)例說(shuō)明

在設(shè)計(jì)網(wǎng)站時(shí)，為了體現(xiàn)網(wǎng)站的個(gè)性，可以設(shè)計(jì)網(wǎng)站Logo文字的圖案填充效果。本實(shí)例將通過(guò)CSS樣式來(lái)設(shè)置文字的圖案填充效果，運(yùn)行結(jié)果如圖3.27所示。

圖3.27 文字的圖案填充效果

關(guān)鍵技術(shù)

本實(shí)例主要通過(guò)CSS樣式的dropshadow濾鏡和chroma濾鏡實(shí)現(xiàn)。dropshadow濾鏡的用法請(qǐng)參考實(shí)例077，chroma濾鏡的語(yǔ)法格式如下：

        {filter: chroma(color=color_value)}

參數(shù)說(shuō)明

color：透明的顏色，如color的值為#FFCC00，則濾鏡作用范圍內(nèi)的所有為#FFCC00的顏色都變?yōu)橥该鳎▓D片的像素。

設(shè)計(jì)過(guò)程

（1）新建index.htm頁(yè)面，在頁(yè)面中添加<div>標(biāo)簽，并設(shè)置<div>的背景圖片，關(guān)鍵代碼如下：

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

（2）在步驟（1）添加的<div>標(biāo)簽中，再添加一個(gè)<div>標(biāo)簽，然后添加文字，并設(shè)置div中的文字濾鏡樣式，關(guān)鍵代碼如下：

        <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>

秘笈心法

在應(yīng)用chroma濾鏡實(shí)現(xiàn)文字的填充效果時(shí)，經(jīng)常需要再應(yīng)用dropshadow濾鏡為文字設(shè)置陰影效果，這樣可以讓文字的填充效果更加清晰、美觀。

實(shí)例080 文字的探照燈效果

光盤位置：光盤\MR\03\080

高級(jí)

實(shí)用指數(shù)：

實(shí)例說(shuō)明

在設(shè)計(jì)網(wǎng)站時(shí)，為了體現(xiàn)網(wǎng)站的個(gè)性，可以設(shè)計(jì)網(wǎng)站Logo文字的探照燈效果。本實(shí)例將通過(guò)CSS樣式來(lái)設(shè)置文字的探照燈效果。當(dāng)鼠標(biāo)在文字上移動(dòng)時(shí)，文字上方會(huì)有類似于燈光的照明效果，運(yùn)行結(jié)果如圖3.28所示。

圖3.28 文字的探照燈效果

關(guān)鍵技術(shù)

本實(shí)例主要通過(guò)CSS樣式的light濾鏡實(shí)現(xiàn)，其語(yǔ)法格式如下：

        {filter: light}

在JavaScript中，可以使用document對(duì)象來(lái)獲得元素的light濾鏡對(duì)象，然后通過(guò)調(diào)用light濾鏡對(duì)象中的方法來(lái)實(shí)現(xiàn)文字的發(fā)光效果，light濾鏡中包含的方法及說(shuō)明如表3.8所示。

表3.8 light濾鏡的方法及說(shuō)明

在JavaScript方法中，調(diào)用addAmbient()方法的語(yǔ)法如下：

        document.all.Obj.filters.light.addAmbient(R, G, B, strength)

其中Obj表示HTML標(biāo)簽的id屬性值。參數(shù)R、G、B表示紅、綠、藍(lán)的顏色分量，strength表示光投射的數(shù)量。

調(diào)用addCone()方法的語(yǔ)法如下：

        document.all.Obj.filters.light.addCone(x1, y1, z1, x2, y2, z2, R, G, B, strength, spread)

參數(shù)x1、y1、z1表示光源的位置，x2、y2、z2表示目標(biāo)點(diǎn)的位置，R、G、B表示紅、綠、藍(lán)的顏色分量，strength表示光投射的數(shù)量，spread表示光源的范圍。

調(diào)用moveLight()方法的語(yǔ)法如下：

        document.all.Obj.filter.light.moveLight(lightNumber, x, y, z, fAbsolute)

參數(shù)lightNumber表示光源的數(shù)字，x、y、z表示光源的三維坐標(biāo)，fAbsolute表示移動(dòng)是相對(duì)的還是絕對(duì)的。

設(shè)計(jì)過(guò)程

（1）新建index.htm頁(yè)面，編寫<div>標(biāo)簽的CSS樣式，關(guān)鍵代碼如下：

        <style>
         .mydiv{
              color:white;
              filter:light;
              height:300;
              font-size:35px;
              left:10px;
              position:relative;
              top:10px;
              width:400px;
        }
        </style>

（2）在頁(yè)面中添加一個(gè)<div>標(biāo)簽，并且應(yīng)用以上定義的CSS樣式，關(guān)鍵代碼如下：

        <div id="div1"class="mydiv">
              明日科技論壇
        </div>

（3）在JavaScript中，調(diào)用light濾鏡對(duì)象的方法，設(shè)置光源，關(guān)鍵代碼如下：

        <script type="text/javascript">
        /**初始化方法 */
        function init(){
              document.all.div1.filters.light.addAmbient(10,10,40,30);
              document.all.div1.filters.light.addCone(400,400,120,160,100,255,255,80,120,5);
        }
        /**鼠標(biāo)經(jīng)過(guò)時(shí)調(diào)用的方法 */
        function move(){
              document.all.div1.filters.light.moveLight(1, window.event.x-20, window.event.y,0,1);
        }
        </script>

（4）在頁(yè)面的onload事件中調(diào)用init()方法，onMousemove事件中調(diào)用move()方法，關(guān)鍵代碼如下：

        <body onload="init()"onmousemove="move()">

秘笈心法

本實(shí)例中應(yīng)用的light濾鏡的方法在實(shí)際應(yīng)用中并不常見(jiàn)，因此只要了解一下該濾鏡的用法即可，無(wú)須死記硬背。

實(shí)例081 文字的閃爍效果

光盤位置：光盤\MR\03\081

高級(jí)

實(shí)用指數(shù)：

實(shí)例說(shuō)明

本實(shí)例將通過(guò)CSS樣式來(lái)設(shè)置文字的閃爍效果。當(dāng)頁(yè)面加載后，文字開(kāi)始閃爍，當(dāng)鼠標(biāo)移動(dòng)到文字上時(shí)，文字停止閃爍；鼠標(biāo)移出文字時(shí)，文字繼續(xù)閃爍，運(yùn)行結(jié)果如圖3.29所示。

圖3.29 文字的閃爍效果

關(guān)鍵技術(shù)

本實(shí)例主要通過(guò)CSS樣式的glow濾鏡實(shí)現(xiàn)，glow濾鏡的用法請(qǐng)參考實(shí)例076。實(shí)現(xiàn)文字的閃爍效果主要是使用JavaScript函數(shù)來(lái)控制glow濾鏡的enabled屬性，enabled屬性表示glow濾鏡是否被禁用，當(dāng)enabled的屬性值為true時(shí)則激活glow濾鏡，否則禁用glow濾鏡。

設(shè)計(jì)過(guò)程

（1）新建index.htm頁(yè)面，編寫文字發(fā)光的CSS樣式和層的相對(duì)位置樣式，關(guān)鍵代碼如下：

        <style type="text/css">
        .glow1 {
        position:absolute;width:296px;height:42px;z-index:1;
        filter:glow(color=#FF0000, strengh=2)
        }
        .inside  {
        position:relative; top:10px;
        }
        </style>

（2）在頁(yè)面中添加層并且在層中添加文字，關(guān)鍵代碼如下：

        <div id="div1"align="center"class="glow1"onmouseover="stopflash(this)"onmouseout="init()">
              <div class="inside">文字的閃爍效果</div>
        </div>

（3）編寫實(shí)現(xiàn)文字閃爍效果的JavaScript方法，關(guān)鍵代碼如下：

        <script language="javascript">
        /**頁(yè)面加載后調(diào)用的方法 */
        function init(){
              makeflash(div1);
        }
        /**光暈開(kāi)始閃爍
        *@param obj:div標(biāo)簽對(duì)象
        */
        function makeflash(obj){
              //每隔一秒，禁用glow濾鏡一次，1000表示1000毫秒，即1秒
              obj.flashTimer=setInterval("div1.filters.glow.enabled= ! div1.filters.glow.enabled",1000);
        }
        /**光暈停止閃爍 */
        function stopflash(obj){
              clearInterval(obj.flashTimer)
        }
        </script>

秘笈心法

本實(shí)例應(yīng)用到了JavaScript中window對(duì)象的setInterval()方法，該方法會(huì)根據(jù)指定的時(shí)間間隔來(lái)執(zhí)行JavaScript代碼，該方法的語(yǔ)法結(jié)構(gòu)如下：

        var timer = setInterval(func, timeValue);

參數(shù)func表示將要執(zhí)行的JavaScript代碼或JavaScript自定義的方法，timeValue表示時(shí)間間隔，以毫秒為單位。

實(shí)例082 文字的空心效果

光盤位置：光盤\MR\03\082

高級(jí)

實(shí)用指數(shù)：

實(shí)例說(shuō)明

在設(shè)計(jì)網(wǎng)站時(shí)，為了體現(xiàn)網(wǎng)站的個(gè)性，可以設(shè)計(jì)網(wǎng)站內(nèi)容文字的空心效果。本實(shí)例將通過(guò)CSS樣式來(lái)設(shè)置文字的空心效果，運(yùn)行效果如圖3.30所示。

圖3.30 文字的空心效果

關(guān)鍵技術(shù)

本實(shí)例主要通過(guò)CSS樣式的glow濾鏡、mask濾鏡和chroma濾鏡實(shí)現(xiàn)。glow和chroma濾鏡的用法在前面實(shí)例中已經(jīng)介紹過(guò)，mask濾鏡的語(yǔ)法如下：

        {filter: mask(color= color_value)}

參數(shù)說(shuō)明

? mask：主要用于文字遮罩。

? color：表示遮罩所用的顏色。

設(shè)計(jì)過(guò)程

（1）新建index.htm頁(yè)面，編寫文字空心效果的CSS樣式，關(guān)鍵代碼如下：

        <style type="text/css">
        .tb1{
              font-size:40px;
              font-family：楷體；
              FILTER: glow(strength=1)mask(color=blue)chroma(color=blue)
        }
        </style>

（2）在頁(yè)面中添加表格，并應(yīng)用以上定義的CSS樣式，關(guān)鍵代碼如下：

        <table align="center"  height="60"border="0"class="tb1">
          <tr>
            <td height="60"align="center">明日科技論壇</td>
          </tr>
        </table>

秘笈心法

為了提高開(kāi)發(fā)效率，可以將空心效果的文字樣式代碼寫到．css樣式文件中，在需要加入特效的文字中，直接通過(guò)<link>標(biāo)簽引用CSS文字濾鏡樣式文件即可，避免每次都編寫該文字特效代碼。

實(shí)例083 文字的浮雕效果

光盤位置：光盤\MR\03\083

高級(jí)

實(shí)用指數(shù)：

實(shí)例說(shuō)明

在設(shè)計(jì)網(wǎng)站時(shí)，為了體現(xiàn)網(wǎng)站的個(gè)性，可以設(shè)計(jì)網(wǎng)站導(dǎo)航文字的浮雕效果。本實(shí)例將通過(guò)CSS樣式來(lái)設(shè)置文字的浮雕效果，運(yùn)行效果如圖3.31所示。

圖3.31 文字的浮雕效果

關(guān)鍵技術(shù)

本實(shí)例主要通過(guò)CSS樣式的mask濾鏡、shadow濾鏡、dropshadow濾鏡和chroma濾鏡實(shí)現(xiàn)。首先使用mask濾鏡將可見(jiàn)像素遮蔽，將看不見(jiàn)的像素以指定顏色顯示，然后使用shadow濾鏡使文字具有漸變陰影效果，之后用dropshadow濾鏡使文字具有陰影效果，最后使用chroma濾鏡將指定的顏色進(jìn)行透明處理。

設(shè)計(jì)過(guò)程

（1）新建index.htm頁(yè)面，編寫文字浮雕效果的CSS樣式，關(guān)鍵代碼如下：

        <style type="text/css">
        .tb1 {
        font-size:60px;
        font-family：隸書；
        FILTER: mask(color=#EEEEEE)
                  shadow(color=#66AAFF, direction=135)
                  dropshadow(color=#6655FF, offx=-3, offy=-3, positive=2)
                  chroma(color=#EEEEEE)
        }
        </style>

（2）在頁(yè)面中添加表格，并應(yīng)用以上定義的CSS樣式，關(guān)鍵代碼如下：

        <table align="center"  height="60"class="tb1"border="0">
          <tr>
            <td height="60"align="center">明日科技論壇</td>
          </tr>
        </table>

秘笈心法

IE 10已經(jīng)完成采用HTML 5標(biāo)準(zhǔn)了，它已經(jīng)放棄了其特有的Filter（s濾鏡）和VML了，取而代之的是CSS 3和SVG。對(duì)于這兩項(xiàng)內(nèi)容希望大家能夠自學(xué)一下，然后逐漸使用新的技術(shù)來(lái)取代之前經(jīng)常應(yīng)用的Filters和VML。

實(shí)例084 文字的陽(yáng)文效果

光盤位置：光盤\MR\03\084

高級(jí)

實(shí)用指數(shù)：

實(shí)例說(shuō)明

在設(shè)計(jì)網(wǎng)站時(shí)，為了體現(xiàn)網(wǎng)站的個(gè)性，可以設(shè)計(jì)網(wǎng)站內(nèi)容文字的陽(yáng)文效果。本實(shí)例將通過(guò)CSS樣式的多種濾鏡屬性來(lái)實(shí)現(xiàn)，運(yùn)行結(jié)果如圖3.32所示。

圖3.32 文字的陽(yáng)文效果

關(guān)鍵技術(shù)

本實(shí)例主要通過(guò)CSS樣式的mask濾鏡、dropshadow濾鏡和chroma濾鏡實(shí)現(xiàn)。這些濾鏡的用法在前面已經(jīng)介紹過(guò)，在此不再贅述。

設(shè)計(jì)過(guò)程

（1）新建index.htm頁(yè)面，編寫文字陽(yáng)文效果的CSS樣式，關(guān)鍵代碼如下：

        <style type="text/css">
        .tb1 {
        font-size:50px;
        font-family: 隸書；
        FILTER: mask(color=white)
                  dropshadow(color=royalblue, offx=-3, offy=-3, positive=1)
                  chroma(color=white)
        }
        </style>
       （2）在頁(yè)面中添加表格，并應(yīng)用CSS樣式，關(guān)鍵代碼如下：
        <table align="center"  height="60"class="tb1"border="0">
          <tr>
            <td height="60"align="center">明日科技</td>
          </tr>
        </table>

秘笈心法

對(duì)于本實(shí)例實(shí)現(xiàn)的這個(gè)文字的陽(yáng)文效果，在Firefox或者Chrome瀏覽器中，可以通過(guò)CSS 3中的為文字指定多個(gè)陰影的text-shadow屬性來(lái)實(shí)現(xiàn)，關(guān)鍵代碼如下：

        <style type="text/css">
        div{
              text-shadow:1px 1px royalblue,
                            2px 2px royalblue,
                            3px 3px royalblue;
              color: white;
              font-size:50px;
              font-family：隸書；
        </style>

實(shí)例085 文字的雪雕效果

光盤位置：光盤\MR\03\085

高級(jí)

實(shí)用指數(shù)：

實(shí)例說(shuō)明

在設(shè)計(jì)網(wǎng)站時(shí)，為了體現(xiàn)網(wǎng)站的個(gè)性，可以設(shè)計(jì)網(wǎng)站導(dǎo)航文字的雪雕效果。本實(shí)例將通過(guò)CSS樣式的濾鏡屬性來(lái)設(shè)置文字的雪雕效果，運(yùn)行結(jié)果如圖3.33所示。

圖3.33 文字的雪雕效果

關(guān)鍵技術(shù)

本實(shí)例主要通過(guò)CSS樣式的glow濾鏡和dropshadow濾鏡實(shí)現(xiàn)。先用glow濾鏡使文字發(fā)光，然后使用dropshadow濾鏡使文字具有陰影效果，再將這兩個(gè)濾鏡效果進(jìn)行重疊即可。

設(shè)計(jì)過(guò)程

（1）新建index.htm頁(yè)面，編寫文字雪雕效果的CSS樣式，關(guān)鍵代碼如下：

        <style type="text/css">
        .tb1 {
        font-size:40px;
        font-style:italic;
        font-family：楷體；
        filter: glow(color=#FFFFFF, strength=12)
                  dropshadow(color=#86BFFF, offx=3, offy=3, positive=1);
        }
        </style>
       （2）在頁(yè)面中添加表格，并應(yīng)用以上定義的CSS樣式，關(guān)鍵代碼如下：
        <table align="center"width="200"height="70"class="tb1"border="0">
          <tr>
            <td height="60"align="center">明日科技</td>
        </tr>
        </table>

秘笈心法

通過(guò)將glow濾鏡和dropshadow濾鏡效果進(jìn)行重疊，便可實(shí)現(xiàn)文字的雪雕效果。為了達(dá)到更好的美化效果，可以將這樣的字體樣式設(shè)置為網(wǎng)站的字體樣式。

實(shí)例086 文字的火焰效果

光盤位置：光盤\MR\03\086

高級(jí)

實(shí)用指數(shù)：

實(shí)例說(shuō)明

在設(shè)計(jì)網(wǎng)站時(shí)，為了體現(xiàn)網(wǎng)站的個(gè)性，可以設(shè)計(jì)網(wǎng)站內(nèi)容文字的火焰效果。本實(shí)例將通過(guò)CSS樣式的濾鏡屬性來(lái)設(shè)置文字的火焰效果，運(yùn)行結(jié)果如圖3.34所示。

圖3.34 文字的火焰效果

關(guān)鍵技術(shù)

本實(shí)例主要通過(guò)CSS樣式的glow濾鏡、blur濾鏡和wave濾鏡實(shí)現(xiàn)。

（1）blur濾鏡用于設(shè)置文字的模糊效果，語(yǔ)法格式如下：

        {filter : blur(add = value, direction=value, strength=value)}

參數(shù)說(shuō)明

? add：用來(lái)指定圖片是否被改變成模糊效果，取值為true或false。

? direction：用于設(shè)置模糊的方向，模糊效果是按順時(shí)針?lè)较蜻M(jìn)行的，0°表示垂直向上，然后每45°為一個(gè)單位，默認(rèn)值為270°。

? strength：表示有多少像素的寬度將受到模糊影響，默認(rèn)為5個(gè)像素。

（2）wave濾鏡用于使文字出現(xiàn)波浪變形的效果，語(yǔ)法格式如下：

        {filter : wave(add = value, freq=value, lightStrength=value, phase=value, strength=value)}

參數(shù)說(shuō)明

? add：是否將元素按照波形樣式打亂。

? freq：波紋的頻率，即指定在一個(gè)元素上需要產(chǎn)生多少個(gè)完整的波紋。

? lightStrength：增強(qiáng)波紋的光影效果，取值范圍在0～100之間。

? phase：設(shè)置正弦波的偏移量。

? strength：設(shè)置振幅大小。

設(shè)計(jì)過(guò)程

（1）新建index.htm頁(yè)面，編寫文字火焰效果的CSS樣式，關(guān)鍵代碼如下：

        <style type="text/css">
        .tb1 {
        font-size:40px;
        font-family：隸書；
        filter: glow(color=red, strength=6)
                  Blur(Add=true, Direction=0, Strength=10)
                  Wave(Add=add, Freq=3, LightStrength=10, Phase=5, Strength=5)
        }
        </style>
       （2）在頁(yè)面中添加表格，并應(yīng)用文字火焰效果的CSS樣式，關(guān)鍵代碼如下：
        <table align="center"  height="100"class="tb1"border="0">
          <tr>
            <td height="100"align="center">明日科技</td>
          </tr>
        </table>

秘笈心法

在CSS 3中，實(shí)現(xiàn)blur濾鏡的模糊效果可以通過(guò)filter:blur屬性為實(shí)現(xiàn)，不過(guò)對(duì)于該屬性，IE 10還不支持，但是Firefox、Chrome和Opera瀏覽器已經(jīng)支持了，只是在使用時(shí)，需要添加相應(yīng)的前綴，F(xiàn)irefox需要添加-moz-、Chrome需要添加-webkit、Opera需要添加前綴-o-。

實(shí)例087 文字的扭曲動(dòng)畫

光盤位置：光盤\MR\03\087

高級(jí)

實(shí)用指數(shù)：

實(shí)例說(shuō)明

在設(shè)計(jì)網(wǎng)站時(shí)，為了體現(xiàn)網(wǎng)站的個(gè)性，可以設(shè)計(jì)網(wǎng)站內(nèi)容文字的扭曲動(dòng)畫效果。本實(shí)例將通過(guò)CSS樣式的濾鏡屬性來(lái)設(shè)置文字的扭曲動(dòng)畫效果，運(yùn)行結(jié)果如圖3.35所示。

圖3.35 文字的扭曲動(dòng)畫

關(guān)鍵技術(shù)

本實(shí)例主要通過(guò)使用CSS樣式的wave濾鏡和JavaScript的setTimeout()函數(shù)實(shí)現(xiàn)。

設(shè)計(jì)過(guò)程

（1）新建index.htm頁(yè)面，編寫文字扭曲效果的CSS樣式，關(guān)鍵代碼如下：

        <style type="text/css">
        .mydiv {
              width:300px;
              height:150px;
              font-family：黑體；
              font-size:50px;
              color:#00AAFF;
              filter:wave(freq=6, strength=4, phase=5, lightstrength=45, add=0, enabled=1)
        }
        </style>

（2）在頁(yè)面中添加層，并應(yīng)用以上定義的CSS樣式，關(guān)鍵代碼如下：

        <div id="div1"class="mydiv">明日科技</div>

（3）在JavaScript方法中，使用setTimeout()函數(shù)間隔指定的時(shí)間來(lái)修改wave濾鏡的phase屬性值（正弦波的偏移量），實(shí)現(xiàn)文字的扭曲動(dòng)畫，關(guān)鍵代碼如下：

        <script language="javascript">
        var p=2;
        function sport(){
              div1.filters.wave.phase=p;
              p=p+2;
        setTimeout("sport()",20);
        }
        </script>

（4）在頁(yè)面加載時(shí)調(diào)用JavaScript方法，實(shí)現(xiàn)文字的扭曲，關(guān)鍵代碼如下：

        <body onload="sport()">

秘笈心法

使用CSS樣式中的wave濾鏡還可以實(shí)現(xiàn)圖片的水波紋效果，有興趣的讀者可以自己試試，也可以參照實(shí)例092來(lái)完成。

實(shí)例088 輸出文字

光盤位置：光盤\MR\03\088

高級(jí)

實(shí)用指數(shù)：

實(shí)例說(shuō)明

本實(shí)例是將一組帶陰影的文字在頁(yè)面中一個(gè)一個(gè)地顯示出來(lái)，并將該組文字以不同的語(yǔ)句在窗體上循環(huán)顯示，運(yùn)行結(jié)果如圖3.36所示。

圖3.36 輸出文字

關(guān)鍵技術(shù)

本實(shí)例主要是用<span >標(biāo)記中的style樣式的clip屬性的rect()方法來(lái)實(shí)現(xiàn)字符串的輸出效果，下面對(duì)rect()方法進(jìn)行詳細(xì)說(shuō)明。

rect()方法的語(yǔ)法格式如下：

        clip : auto | rect( number number number number )

參數(shù)說(shuō)明

? auto：對(duì)象無(wú)剪切。

? rect(number number number number)：依據(jù)上-右-下-左的順序提供指定對(duì)象左上角為（0,0）坐標(biāo)的4個(gè)偏移數(shù)值，其中任一數(shù)值都可用auto替換，即此邊不剪切。

功能：檢索或設(shè)置對(duì)象的可視區(qū)域。區(qū)域外的部分是透明的，必須將position的值設(shè)為absolute，此屬性方可使用。

設(shè)計(jì)過(guò)程

（1）在頁(yè)面中添加兩個(gè)層，shadow層用于顯示實(shí)體的文字，showstr層用于顯示文字的陰影，代碼如下：

        <div id="shadow" style="position:absolute; visibility:visible; top:12px; left:12px"></div>
        <div id="showstr" style="position:absolute; visibility:visible; top:10px; left:10px"></div>

（2）編輯用于實(shí)現(xiàn)輸出文字的JavaScript代碼。

用一維數(shù)組來(lái)保存要進(jìn)行輸出的字符串，代碼如下：

        <script language="JavaScript">
              var space=0
              var word=0
              var Tstr = new Array()
              Tstr[0]="明日科技"
              Tstr[1]="歡迎購(gòu)買明日科技圖書"
              Tstr[2]="明日科技網(wǎng)址：www.mingrisoft.com"
        </script>

自定義函數(shù)exportstr()，以輸出的方式循環(huán)顯示Tstr數(shù)組中的字符串，代碼如下：

        <script language="JavaScript">
        function exportstr() {
        if (space <= document.body.clientWidth){
          showstr.innerHTML="<span style='position:absolute; font-family：宋體；
              font-size:30pt; color:3399FF; clip:rect(2px "+space+"px 200px 0px)'>"+Tstr[word]+"</span>"
          shadow.innerHTML="<span style='position:absolute; font-family：宋體；
              font-size:30pt; color:888888; clip:rect(2px "+space+"px 200px 0px)'>"+Tstr[word]+"</span>"
          space=space+30
          var timer=setTimeout("exportstr()",30)
        }
        else {
          document.close()
          clearTimeout(timer)
          word++
          space=0
          if (word >= Tstr.length) {word=0}
          var intermezzo=setTimeout("exportstr()",100)
        }
        }
        exportstr();
        </script>

秘笈心法

setTimeout()函數(shù)的作用是在指定的時(shí)間過(guò)后，調(diào)用JavaScript代碼或自定義的函數(shù)，并且只被調(diào)用一次。如果希望一直調(diào)用某個(gè)JavaScript方法，需要將setTimeout()函數(shù)寫在被調(diào)用的JavaScript方法體內(nèi)。