作者:    冯永曜  
 
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 >中加入这样一句代码:οnlοad="playHelp()"。
  到此,可以按F12看效果了,好象也不是太难。你若是想看看其它的转换效果,只要改变一下Revealtrans滤镜中的Transition参数值就行了,其它什么也不用改动,你瞧多方便!用它来作广告条我想效果不会差。比起动画来可瘦小多了。
  当然Revealtrans滤镜同样也可以用于图片,效果也不错,但要改动一下Javascript程序。由于CSS还有一个动态滤镜是BlendTrans滤镜,用它做图片的淡入淡出效果相当不错,且这两个滤镜的使用方法有许多类似的地方,所以关于怎样在图片上用Revealtrans滤镜来产生变换效果,我就一并放到下篇一起讲了。

巧用CSS的RevealTrans滤镜相关推荐

  1. 巧用CSS的BlendTrans滤镜

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

  2. 巧用CSS的Glow滤镜

    作者:冯永曜 对一个对象使用"glow"滤镜后,这个对象的边缘就会产生类似发光的效果,这种效果在PHTOSHOP中做起来都比较麻烦,而在DW3中用CSS的"glow&qu ...

  3. 巧用CSS的 Mask 滤镜

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

  4. 巧用CSS的Wave滤镜

    作者:冯永曜 "wave"滤镜,看它的名称你可能就能想到其效果,正如你想的那样,它的作用是把对象按照垂直的波形样式扭曲,从而产生一种特殊的效果.它共有5个参数: "add ...

  5. html探照灯效果,巧用CSS的MASK滤镜

    Mask滤镜可以为网页上的HTML元件对象作出一个矩形遮罩,关于什么是遮罩?如果你用过Flash中的遮罩,你就会知道了,就是那个样子了.实际上对于遮罩你也可以这样来理解,相当于用一块有色布把物件盖起来 ...

  6. 巧用CSS的Light滤镜

    作者: 冯永曜 Light滤镜能产生一个模拟光源的效果,但使用它要通过调用它的"方法(Method)"来实现,这就要用到一些Javascrpt知识,虽然有一点难度,但产生的效果也是 ...

  7. 巧用CSS的alpha滤镜

    作者:冯永曜 "Alpha"滤镜,听到这个名字,你可能会想到Flash里有,Photoshop里也似乎见过.一点不错,它们的作用基本类似,就是把一个目标元素与背景混合.你可以指定数 ...

  8. [CSS]RevealTrans 滤镜

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

  9. 巧用css的滤镜filter属性处理图片,高斯模糊,HTML页面黑白滤镜等

    效果如下:使用css的filter滤镜属性.可以巧妙的设置图片高斯模糊和特效.包括灰色纪念清明节等悼念烈士英雄灰白效果. <img class='testimg' src="./img ...

最新文章

  1. 固态器件理论(10)半导体制造技术
  2. 洛谷 P1985 翻转棋
  3. iOS 热更新方案 - lance的专栏 - 博客频道 - CSDN.NET
  4. 根据这博客复习,我收到了BAT等大厂的技术岗offer
  5. 朴素贝叶斯应用:垃圾邮件分类
  6. HH SaaS电商系统的商品营销角标功能模块设计
  7. Selenium(Python)页面对象+数据驱动测试框架
  8. 微加速度计的原理与应用
  9. 解决MFC“由于应用程序配置不正确,应用程序未能启动……”错误提示的问题
  10. 电脑需要u盘启动的解决办法--蓝屏修复
  11. 手机PIN码解锁过程
  12. 利用接口实现动态加载类以及 Activator.CreateInstance用法示例
  13. 域名怎样实现自动跳转
  14. mysql超链接_PHP MYSQL超链接和表单
  15. 微信小程序之Github API用户登录认证的三种方式
  16. How to debug LLVM by VS2019 on Windows
  17. L2-001 紧急救援 - java
  18. 2015北京卫视《我是演说家第一季》总冠军--清华博士梁植演讲视频
  19. win10查看USB设备接入记录
  20. html页面添加动态动画小人,使用CSS3各个属性实现小人的动画_html/css_WEB-ITnose

热门文章

  1. 某月某日前包括当天吗_创恒国际投资平台介绍股票交易制度:股票是否可以当天买?当天卖?...
  2. android8.1获取蓝牙地址,[蓝牙] Android 8.1 获取蓝牙设备地址无效;02:00:00:00:00:00
  3. java aqs源码_Java-AQS源码详解(细节很多!)
  4. php7 数组与字符串,第7天 PHP字符串、数组
  5. OpenCV(十八)霍夫变换(直线、线段与圆检测)
  6. C语言中连续调用rand函数,返回值不变
  7. Open3D面向机器学习的扩展库
  8. 基于C++的图像散度计算
  9. 强大的矩阵奇异值分解(SVD)和特征值及其应用
  10. 使用Vue的filters(本地)或filter(全局)过滤常用数据类型