杰哥个人博客|杰哥博客|厦门杰哥|杰哥主页|杰哥个人网站|杰哥网站

CSS滤镜中RevealTrans的效果revealTrans主要有两个参数:Duration和transition.
duration表示持续的时间,而transition表示转换的效果类型.
语法是:object.style.filter="revealTrans(duration=Number,transition=Number)"
除此之外,revealTrans还有三个方法: apply, play和stop,分别为应用转换效果,运行效果和停止效果.

同时还可以参考一下以下的页面转换特效：

网页变换效果（Trans）共分四大类：
"进入网页"（Page-Enter）、
"离开网页"（Page-Exit）、
"进入站点"（Site-Enter）、
"离开站点"（Site-Exit）。
每一大类又分为25个小类，先用进入网页效果来举例说明：

进入网页时的效果

1．混合效果 代码如下：

<meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">

2．盒状收缩效果 代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=0)">

3．盒状放射效果 代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=1)">

4．圆形收缩效果 代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=2)">

5．圆形放射效果 代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=3)">

6．向上擦除效果 代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)">

7．向下擦除效果 代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)">

8．向右擦除效果 代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=6)">

9．向左擦除效果 代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=7)">

10．垂直遮蔽效果 代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=8)">

11．水平遮蔽效果 代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=9)">

12．横向棋盘式效果 代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=10)">

13．纵向棋盘式效果 代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=11)">

14．随即分解效果 代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=12)">

15．左右向中央缩进效果 代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=13)">

16．中央向左右扩展效果 代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=14)">

17．上下向中央缩进效果 代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=16)">

18．中央向上下扩展效果 代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=17)">

19．从左下抽出效果 代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=18)">

20．从左上抽出效果 代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=19)">

21．从右下抽出效果 代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=20)">

22．从右上抽出效果 代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=21)">

23．随机水平线条效果 代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)">

24．随机垂直线条效果 代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)">

25．随机效果 代码如下：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=23)">