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