巧用CSS的RevealTrans滤镜.docVIP

　　　 　　　 　　　 　　 　　　 　 巧用RevealTrans滤镜　　CSS的RevealTrans动态滤镜是一个神奇的滤镜，它能产生23种动态效果，更为奇妙的是它还能在23种动态效果中随机抽用其中的一种。用它来进行网页之间的动态切换，简直方便极了，你只要在网页源代码的 head 与 /head 之间插入这样一行代码：　　　 Meta content=revealTrans(Transition=14,Duration=3.0) http-equiv=enter 　　　 　　　 当你进入这个页面时，网页将象拉幕一样从中间向两边拉开，是不是别具一格？！　　RevealTrans滤镜只有两个参数，Duration：是切换时间，以秒为单位；Transition：是切换方式，它有24种方式，详见下表：　　　 切换效果 Transition参数值 切换效果 Transition参数值 　　　 矩形从大至小 0 随机溶解 12 　　　 矩形从小至大 1 从上下向中间展开 13 　 圆形从大至小 2 从中间向上下展开 14 　 圆形从小至大 3 从两边向中间展开 15 　　 向上推开 4 从中间向两边展开 16 　　　 向下推开 5 从右上向左下展开 17 　　　 向右推开 6 从右下向左上展开 18 　 向左推开 7 从左上向右下展开 19 　　 垂直形百叶窗 8 从左下向右上展开 20 　 水平形百叶窗 9 随机水平细纹 21 　　 水平棋盘 10 随机垂直细纹 22 　　 垂直棋盘 11 随机选取一种特效 23 　　 　　因此，你只要改变RevealTrans滤镜的“Transition的值，就能获得不同的网页切换效果，是不是太方便了点？但很遗憾，要把RevealTrans滤镜用于网页中的某个对象就没有这么简单了，它必须借助于JavaScript来调用其方法，才能实现，这就是说要动手编程序了。但也不是太难，下面我将通过一个制作动态字幕变换的例子来说明其使用方法。渐淡字幕变换效果　　这个例子演示了利用Javascript程序控制Revealtrans滤镜来实现字幕逐渐淡出和渐进的效果，请看下面的效果图：图1　开始的字幕 图2　渐变中的字幕 图3　第二幅字幕　　上面的效果看起来好象不好，是吗？实际效果看起来比这漂亮多了。由于是动态转换，上面只是我抓的三张图片，只能帮助你了解其转换过程，真正的效果只有待你按我下面讲的方法动手做出来才能看到。请看制作方法：　　1、制作一个Revealtrans滤镜，取名为“mytrans，其制作方法与前面介绍的静态滤镜相同，参数值为Transition=12,Duration=2。设置好后，在网页源代码的 head 与 /head 之间将有下面这样的代码： style type=text/css  !--.mytrans { filter:revealTrans(Transition=12,Duration=2)}--  /style 　　2、插入一个层，我们把层的“Layer ID”改为“div1”（可直接在层的属性面板上加入即可），并设置好层的背景和调整好层的大小，并把Revealtrans滤镜加载到到层上，这时你看到的层的标记代码是这样的： div id=div1 style=position:absolute; width:680px; height:30px; z-index:37; background: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000 class=mytrans /div 　　3、在网页源代码的 head 与 /head 之间插入下面这段Javascript程序：　　 script language=JavaS