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比较特别，是随机效果，程序默认就是随机效果。
代码
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<div id="dimg" style="150px;height:150px;yellow;filter:revealTrans(duration=1,transition=12); background-color:Yellow;">
<div id="dinner" style="130px;height:130px;background-color:blue;"></div>
</div>
<input type="button" value="内部消失" onclick="var dimg=document.getElementById('dimg');dimg.filters[0].apply
();var dinner=document.getElementById('dinner');dinner.style.visibility='hidden';dimg.filters[0].play();" />
<input type="button" value="消失" onclick="var dimg=document.getElementById('dimg');dimg.filters[0].apply();dimg.style.visibility='hidden';dimg.filters[0].play();" />
<input type="button" value="显示" onclick="var dimg=document.getElementById('dimg');dimg.filters[0].apply();dimg.style.visibility='';dimg.filters[0].play();" />
</body>
</html>
可以看到在上面的例子中，内部的div dinner继承了外层div dimg的滤镜效果:revealTrans(duration=1,transition=12);,在点击内部消失和消失后dinner都用闪点方式消失了
但是，如果对dinner应用绝对定位或相对定位后，它将不继承外层div的滤镜特性(CSS特性导致)，那么怎么办呢？别慌我们稍作修改同样可以得到与上面例子相同的效果，请看下面的例子:
代码
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<div id="dimg" style="150px;height:150px;yellow;filter:revealTrans(duration=1,transition=12); background-color:Yellow;">
<div id="dinner" style="130px;height:130px;background-color:blue;filter:revealTrans(duration=1,transition=12); position:absolute;"></div>
</div>
<input type="button" value="内部消失" onclick="var dinner=document.getElementById('dinner');dinner.filters[0].apply
();dinner.style.visibility='hidden';dinner.filters[0].play();" />
<input type="button" value="消失" onclick="var dinner=document.getElementById('dinner');dinner.filters[0].apply
();dinner.style.visibility='hidden';dinner.filters[0].play();var dimg=document.getElementById('dimg');dimg.filters[0].apply();dimg.style.visibility='hidden';dimg.filters[0].play();" />
<input type="button" value="显示" onclick="var dimg=document.getElementById('dimg');dimg.filters[0].apply();dimg.style.visibility='';dimg.filters[0].play();" />
</body>
</html>
可以看到这次我们对内部div dinner也设置了滤镜效果，而且在消失和内部消失按钮上我们不再让dimg来控制dinner的滤镜效果(因为dinner在position:absolute;的时候根本就不会继承父div dimg的滤镜特性)，我们专门对dinner的滤镜效果进行了控制:var dinner=document.getElementById('dinner');dinner.filters[0].apply();dinner.style.visibility='hidden';dinner.filters[0].play();好了点击两个消失按钮看看，效果和例1一模一样~