巧用CSS的RevealTrans滤镜

最新推荐文章于 2014-01-03 11:26:00 发布

最新推荐文章于 2014-01-03 11:26:00 发布 · 111 阅读

文章标签：

#CSS #JavaScript #编程 #ViewUI

博客涉及CSS和JavaScript编程相关内容，但具体内容未给出。CSS用于网页样式设计，JavaScript为网页增添交互性，二者在前端开发中至关重要。

作者：冯永曜

CSS的RevealTrans动态滤镜是一个神奇的滤镜，它能产生23种动态效果，更为奇妙的是它还能在23种动态效果中随机抽用其中的一种。用它来进行网页之间的动态切换，简直方便极了，你只要在网页源代码的<head>与</head>之间插入这样一行代码：<Metacontent=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滤镜来实现字幕逐渐淡出和渐进的效果，请看下面的效果图：
<styletype="text/css">

</style>
　　2、插入一个层，我们把层的“LayerID”改为“div1”（可直接在层的属性面板上加入即可），并设置好层的背景和调整好层的大小，并把Revealtrans滤镜加载到到层上，这时你看到的层的标记代码是这样的：<divid="div1"style="position:absolute;width:680px;height:30px;z-index:37;background:#FFFFCC;layer-background-color:#FFFFCC;border:1pxnone#000000"class="mytrans"></div>
　　3、在网页源代码的<head>与</head>之间插入下面这段Javascript程序：
　　<scriptlanguage="JavaScript">
　　
　　</script>
　　4、在网页的源代码的<body>中加入这样一句代码：onload="playHelp()"。
　　到此，可以按F12看效果了，好象也不是太难。你若是想看看其它的转换效果，只要改变一下Revealtrans滤镜中的Transition参数值就行了，其它什么也不用改动，你瞧多方便！用它来作广告条我想效果不会差。比起动画来可瘦小多了。
　　当然Revealtrans滤镜同样也可以用于图片，效果也不错，但要改动一下Javascript程序。由于CSS还有一个动态滤镜是BlendTrans滤镜，用它做图片的淡入淡出效果相当不错，且这两个滤镜的使用方法有许多类似的地方，所以关于怎样在图片上用Revealtrans滤镜来产生变换效果，我就一并放到下篇一起讲了。