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一模一样~

转载于:https://www.cnblogs.com/OpenCoder/archive/2009/12/07/1618866.html