IE濾鏡切換效果演示

2022-02-06 22:47:36 字數 2942 閱讀 9097

css filter:revealtrans 用法:

filter:revealtrans(duration=轉換的秒數,transition=轉換的型別)

css的revealtrans動態濾鏡是乙個神奇的濾鏡,它能產生23種動態效果

transition值效果:

0 : 矩形收縮轉換。

1 : 矩形擴張轉換。

2 : 圓形收縮轉換。

3 : 圓形擴張轉換。

4 : 向上擦除。

5 : 向下擦除。

6 : 向右擦除。

7 : 向左擦除。

8 : 縱向百葉窗轉換。

9 : 橫向百葉窗轉換。

10 : 西洋棋棋盤橫向轉換。

11 : 西洋棋棋盤縱向轉換。

12 : 隨機雜點干擾轉換。

13 : 左右關門效果轉換。

14 : 左右開門效果轉換。

15 : 上下關門效果轉換。

16 : 上下開門效果轉換。

17 : 從右上角到左下角的鋸齒邊覆蓋效果轉換。

18 : 從右下角到左上角的鋸齒邊覆蓋效果轉換。

19 : 從左上角到右下角的鋸齒邊覆蓋效果轉換。

20 : 從左下角到右上角的鋸齒邊覆蓋效果轉換。

21 : 隨機橫線條轉換。

22 : 隨機豎線條轉換。

23 : 隨機使用上面可能的值轉換。

其中23比較特別,是隨機效果,程式預設就是隨機效果。

**doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" ""

>

<

html 

xmlns

="">

<

head

>

<

title

>

無標題頁

title

>

head

>

<

body

>

<

div 

id="dimg"

style

="width:150px;height:150px;yellow;filter:revealtrans(duration=1,transition=12); background-color:yellow;"

>

<

div 

id="dinner"

style

="width:130px;height:130px;background-color:blue;"

>

div>

div>

<

input 

type

="button"

value

="內部消失"

onclick

/>

<

input 

type

="button"

value

="消失"

onclick

/>

<

input 

type

="button"

value

="顯示"

onclick

/>

body

>

html

>

可以看到在上面的例子中,內部的div dinner繼承了外層div dimg的濾鏡效果:revealtrans(duration=1,transition=12);,在點選內部消失和消失後dinner都用閃點方式消失了

但是,如果對dinner應用絕對定位或相對定位後,它將不繼承外層div的濾鏡特性(css特性導致),那麼怎麼辦呢?別慌我們稍作修改同樣可以得到與上面例子相同的效果,請看下面的例子:

**doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" ""

>

<

html 

xmlns

="">

<

head

>

<

title

>

無標題頁

title

>

head

>

<

body

>

<

div 

id="dimg"

style

="width:150px;height:150px;yellow;filter:revealtrans(duration=1,transition=12); background-color:yellow;"

>

<

div 

id="dinner"

style

="width:130px;height:130px;background-color:blue;filter:revealtrans(duration=1,transition=12); position:absolute;"

>

div>

div>

<

input 

type

="button"

value

="內部消失"

onclick

/>

<

input 

type

="button"

value

="消失"

onclick

/>

<

input 

type

="button"

value

="顯示"

onclick

/>

body

>

html

>

IE濾鏡效果

濾鏡切換效果 meta content revealtrans transition 14,duration 3.0 http equiv page enter 頁面 style filter revealtrans duration 1,transition 6 css revealtrans濾鏡...

IE濾鏡 漸變

文章 gradient,漸變濾鏡。語法 filter progid dximagetransform.microsoft.gradient 完整寫法 filter progid dximagetransform.microsoft.gradient enabled ture gradienttype...

Paint 濾鏡效果

lightingcolorfliter r r mul.r 0xff add.r g g mul.g 0xff add.g b b mul.b 0xff add.b 紅色去除掉 lightingcolorfilter lighting new lightingcolorfilter 0x00ffff...