巧用CSS的RevealTrans滤镜

原创 2004年11月04日 09:41:00
作者:    冯永曜  
 
CSS的RevealTrans动态滤镜是一个神奇的滤镜,它能产生23种动态效果,更为奇妙的是它还能在23种动态效果中随机抽用其中的一种。用它来进行网页之间的动态切换,简直方便极了,你只要在网页源代码的< head >与< /head >之间插入这样一行代码:< Meta content=revealTrans(Transition=14,Duration=3.0) http-equiv=Page-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滤镜来实现字幕逐渐淡出和渐进的效果,请看下面的效果图:
< 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="JavaScript" >
  < !-- 
  function HelpArray(len)
  {
  this.length=len;
  }
  // 建立一个数组,存放转换的内容。
  HelpText=new HelpArray(5);
  HelpText[0]="在一个文档使用动态转换的滤镜(Revealtrans)其实是很容易的。";
  HelpText[1]="首先,为对象的样式表单建立一个需要转换的“Revaltrans"滤镜,";
  HelpText[2]="然后,使用“apply()"方法防止错误,";
  HelpText[3]="现在,你可以改变任何你想改变的东西,";
  HelpText[4]="最后,“play()"方法开始进行转换。";
  ScriptText=new HelpArray(5);
  var i= -1;
  // 显示转换效果
  function playHelp()
  {
  if (i==4)
  { i=0 ;}
  else
  { i++; }
  div1.filters[0].apply();
  div1.innerText=HelpText[i];
  div1.filters[0].play();
  // 设置每段字幕演示的时间,以毫秒计。这里的时间要长于滤镜中的时间,以保证在转换结束后能停留一段时间。
  // 以方便看清楚字幕内容。在本例中字幕演示的时间是6秒,滤镜中设置的转换时间是2秒。
  mytimeout=setTimeout("playHelp()",6000);
  }
  -- > 
  < /script >
  4、在网页的源代码的< body >中加入这样一句代码:onload="playHelp()"。
  到此,可以按F12看效果了,好象也不是太难。你若是想看看其它的转换效果,只要改变一下Revealtrans滤镜中的Transition参数值就行了,其它什么也不用改动,你瞧多方便!用它来作广告条我想效果不会差。比起动画来可瘦小多了。
  当然Revealtrans滤镜同样也可以用于图片,效果也不错,但要改动一下Javascript程序。由于CSS还有一个动态滤镜是BlendTrans滤镜,用它做图片的淡入淡出效果相当不错,且这两个滤镜的使用方法有许多类似的地方,所以关于怎样在图片上用Revealtrans滤镜来产生变换效果,我就一并放到下篇一起讲了。
版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS 滤镜应用集锦 -- 巧用CSS的 RevealTrans 滤镜

CSS的RevealTrans动态滤镜是一个神奇的滤镜,它能产生23种动态效果,更为奇妙的是它还能在23种动态效果中随机抽用其中的一种。用它来进行网页之间的动态切换,简直方便极了,你只要在网页源代码的...
  • thx_bj
  • thx_bj
  • 2006年08月14日 14:12
  • 1085

CSS 滤镜应用集锦 -- 巧用CSS的 RevealTrans 滤镜

CSS的RevealTrans动态滤镜是一个神奇的滤镜,它能产生23种动态效果,更为奇妙的是它还能在23种动态效果中随机抽用其中的一种。用它来进行网页之间的动态切换,简直方便极了,你只要在网页源代码的...
  • xiaoxiaohai123
  • xiaoxiaohai123
  • 2007年05月15日 09:55
  • 512

CSS的RevealTrans动态滤镜

CSS的RevealTrans动态滤镜是一个神奇的滤镜,它能产生23种动态效果,更为奇妙的是它还能在23种动态效果中随机抽用其中的一种。   两个参数Transition和Duration,分别是变...
  • ze_lin_huang
  • ze_lin_huang
  • 2013年02月02日 11:11
  • 395

图片切换-CSS滤镜revealTrans的应用

第一种方法:                  style="BORDER-LEFT-COLOR: black; FILTER: revealTrans(duration=2,transition=1...
  • xiaoxiaohai123
  • xiaoxiaohai123
  • 2007年05月15日 12:53
  • 702

图片切换-CSS滤镜revealTrans的应用

第一种方法:                  style="BORDER-LEFT-COLOR: black; FILTER: revealTrans(duration=2,transition=1...
  • thx_bj
  • thx_bj
  • 2006年08月14日 16:05
  • 1256

CSS3 常用滤镜效果

css3属性 -webkit-filter   -webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错。下面咱们就学习一下filter这个属性吧。 现在...
  • flower46273736
  • flower46273736
  • 2016年07月11日 10:29
  • 2481

【CSS+DIV】(1)——滤镜的应用

背景:牛腩中接触过CSS,当时对这个CSS情有独钟,因为它可以美化界面,而我就喜欢和界面这种看得见效果的东西打交道,现在又重新学习,而且内容还那么多,超级开心,废话少说,动手吧! 一、CSS滤镜 ...
  • u013043341
  • u013043341
  • 2015年12月23日 20:24
  • 1362

巧用CSS的BlendTrans滤镜

作者:冯永曜BlendTrans滤镜比起上一篇介绍的Revealtrans滤镜来要简单一些,它只有一个参数:Duration 变换时间,它的功能也比较单一,就是产生一种淡入淡出的效果,不过它的这种效果...
  • 21aspnet
  • 21aspnet
  • 2004年11月04日 09:45
  • 1658

巧用CSS的 Mask 滤镜

作者:冯永曜在网页制作中使用CSS,这已是众所周知,而关于CSS滤镜使用的却介绍得不多。其实,0CSS的滤镜在Dreamweaver3中用起来也很方便,且能使文字产生一种类似图象的效果,但比起图片来可...
  • 21aspnet
  • 21aspnet
  • 2004年11月04日 09:49
  • 2033

巧用CSS的Wave滤镜

作者:冯永曜"wave"滤镜,看它的名称你可能就能想到其效果,正如你想的那样,它的作用是把对象按照垂直的波形样式扭曲,从而产生一种特殊的效果。它共有5个参数:  "add":表示是否要把对象按照波形式...
  • 21aspnet
  • 21aspnet
  • 2004年11月04日 09:48
  • 1622
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:巧用CSS的RevealTrans滤镜
举报原因:
原因补充:

(最多只允许输入30个字)