随笔- 672 文章- 2 评论- 325 阅读- 281万

IE滤镜切换效果演示

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<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="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特性导致)，那么怎么办呢？别慌我们稍作修改同样可以得到与上面例子相同的效果，请看下面的例子:

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<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="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一模一样~