網頁特效大公開(轉)[@more@]

　　現在非常多的朋友搞個人網頁，而且做的五彩繽紛，各有特色，但是比較多的朋友把大大的一幅圖象放在頁面上，致使頁面下載很慢，加上用GIF格式做動畫，儘管用GIF格式搞的動畫比較苗條，但是也不大合算。能否不用特別做的圖象，不用GIF格式做動畫，可以把頁面搞的生氣活現呢？可以，但JAVASCRIPT比較對一般初學者來說是比較難的，筆者今天要用IE本身內含的STYLE這個重量級的命令屬性中的RevealTrans和濾鏡來搞搞新意思！希望網友們能靈活運用這些濾鏡和頁面切換效果，把自己的主頁搞的有聲有色！不斷進步！

Style屬性：

　　可以應用在標籤中，更可用廣泛應用在$#@60;table$#@62;$#@60;tr$#@62;$#@60;td$#@62;$#@60;body$#@62;$#@60;center$#@62;$#@60;img$#@62;$#@60;input$#@62;$#@60;font$#@62;$#@60;form$#@62;$#@60;frame$#@62;$#@60;label$#@62;$#@60;map$#@62;等等標籤中，更重要的是，它可用在標籤中。

頁面切換效果：

在頁面前部與之間加入""

說明：duration為頁面切換的時間長度，3.000表示3秒鐘，一般可以直接輸入3便可；transition為切換效果，從1-23共22種不同的切換效果，其中23為隨機效果。

濾鏡效果：

Photoshop的濾鏡用的多了吧，在頁面中也用濾鏡搞搞新意思吧！

語法:STYLE="filter:filtername(fparameter1,fparameter2...)}(Filtername為濾鏡的名稱，fparameter1、fparameter2等是濾鏡的引數)

濾鏡說明：

Alpha：設定透明層次.

blur：建立高速度移動效果，即模糊效果.

Chroma：製作專用顏色透明.

DropShadow：建立物件的固定影子.

FlipH：建立水平映象圖片.

FlipV：建立垂直映象圖片.

glow：加光輝在附近物件的邊外.

gray：把圖片灰度化.

invert：反色.

light：建立光源在物件上.

mask：建立透明掩膜在物件上.

shadow：建立偏移固定影子.

wave：波紋效果.

Xray：使物件變的像被x光照射一樣.

1.濾鏡:alpha

語法:

STYLE="filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,

StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)"

說明：

Opacity:起始值，取值為0-100,0為透明，100為原圖.

FinishOpacity:目標值.

Style：1或2或3

StartX：任 ?

StartY：任意值

例子：filter:Alpha(Opacity="0",FinishOpacity="40",Style="2")

2.濾鏡:blur

語法:

STYLE="filter:Blur(Add=add,Direction=direction,Strength=strength)"

說明：

Add:一般為1，或0.

Direction:角度,0-315度，步長為45度.

Strength:效果增長的數值,一般5即可.

例子：filter:Blur(Add="1",Direction="45",Strength="5")

3.濾鏡:chroma

語法:

STYLE="filter:Chroma(Color=color)"

說明:

color:#rrggbb格式，任意.

例子：filter:Chroma(Color="#FFFFFF")

4.濾鏡:DropShadow

語法:

STYLE="filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)"

說明:

Color:#rrggbb格式，任意.

Offx:X軸偏離值.

Offy:Y軸偏離值.

Positive:1或0.

例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

5.濾鏡:FlipH

語法:

STYLE="filter:FlipH"

例子：filter:FlipH

6.濾鏡:FlipV

語法:

STYLE="filter:FlipV"

例子：filter:FlipV

7.濾鏡:Glow

語法:

STYLE="filter:Glow(Color=color,Strength=strength)"

說明:

Color:發光顏色.

Strength:強度(0-100)

例子：filter:Glow(Color="#6699CC",Strength="5")

8濾鏡:Gray

語法:

STYLE="filter:Gray"

例子：filter:Gray

9.濾鏡:Invert

語法:

STYLE="filter:Invert"

例子：filter:Invert

10.濾鏡:Mask

語法:

STYLE="filter:Mask(Color=color)"

例子：filter:Mask(Color="#FFFFE0")

11.濾鏡:Shadow

語法:

filter:Shadow(Color=color,Direction=direction)

說明:

Color:#rrggbb格式.

Direction:角度,0-315度，步長為45度.

例子：filter:Shadow(Color="#6699CC",Direction="135")

12.濾鏡:Wave

語法:

filter:Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength)

說明:

Add:一般為1，或0.

Freq:變形值.

LightStrength:變形百分比.

Phase:角度變形百分比.

Strength:變形強度.

例子:filter:wave(Add="0",Phase="4",Freq="5",LightStrength="5",Strength="2")

13.濾鏡:Xray

語法:

STYLE="filter:Xray"

例子:filter:Xray

網頁特效大公開(轉)

相關文章