CSS的RevealTrans动态滤镜

CSS的RevealTrans动态滤镜是一个神奇的滤镜,它能产生23种动态效果,更为奇妙的是它还能在23种动态效果中随机抽用其中的一种。

两个参数Transition和Duration,分别是变换效果和持续时间,其中Duration是浮点数。

此外还有两个属性Enabled和Percent分别是是否激活滤镜和当前静态滤镜输出在转换进程中所处的点。

设置完后还需要运行apply和play方法,分别是应用变换效果和运行效果

下面列出所有效果和对应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比较特别,是随机效果,程序默认就是随机效果。

使用方法:style=”FILTER: revealTrans(duration=2,transition=6)”

但是这个方法只对Ie有用,对firefox不起作用,我们可以在javascript里面这样设置用以过滤掉firefox:

if(navigator.appName == “Microsoft Internet Explorer”){   image.filters.revealTrans.Transition=23;
image.filters.revealTrans.duration=10;
}

这样,firefox依旧能正常执行以下语句。