`

网页变换效果---revealTrans滤镜的用法

    博客分类:
  • Css
 
阅读更多
revealTrans主要有两个参数:Duration和transition.
duration表示持续的时间,而transition表示转换的效果类型.
语法是:object.style.filter="revealTrans(duration=Number,transition=Number)"
除此之外,revealTrans还有三个方法: apply, play和stop,分别为应用转换效果,运行效果和停止效果.



Filter:revealtrans(duration=转换的秒数,transition=转换的类型)

表达式中的transition参数的参数值有24中,以代号0-23来表示,分别代表24中显示类型,具体的参数值列表如下所示:


同时还可以参考一下以下的页面转换特效:

网页变换效果(Trans)共分四大类:
"进入网页"(Page-Enter)、
"离开网页"(Page-Exit)、
"进入站点"(Site-Enter)、
"离开站点"(Site-Exit)。
每一大类又分为25个小类,先用进入网页效果来举例说明:

进入网页时的效果

1.混合效果 代码如下:

<meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">

2.盒状收缩效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=0)">

3.盒状放射效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=1)">

4.圆形收缩效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=2)">

5.圆形放射效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=3)">

6.向上擦除效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)">

7.向下擦除效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)">

8.向右擦除效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=6)">

9.向左擦除效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=7)">

10.垂直遮蔽效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=8)">

11.水平遮蔽效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=9)">

12.横向棋盘式效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=10)">

13.纵向棋盘式效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=11)">

14.随即分解效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=12)">

15.左右向中央缩进效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=13)">

16.中央向左右扩展效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=14)">

17.上下向中央缩进效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=16)">

18.中央向上下扩展效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=17)">

19.从左下抽出效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=18)">

20.从左上抽出效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=19)">

21.从右下抽出效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=20)">

22.从右上抽出效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=21)">

23.随机水平线条效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)">

24.随机垂直线条效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)">

25.随机效果 代码如下:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=23)">

<script type="text/javascript"></script>

<!--自定义字段-->
分享到:
评论

相关推荐

    RevealTrans滤镜的用法

    讲解CSS动态滤镜RevealTrans滤镜的用法,transition参数的参数值有24中,以代号0-23来表示,分别代表24中显示类型

    图片切换类似幻灯片效果 RevealTrans动态滤镜

    实现图片切换类似幻灯片效果, 一共23种切换效果, 代码十分简单明了, 没有多余的干扰代码, 看后马上就能明白怎样使用动态滤镜. 测试环境: Window XP professional sp3, IE 6.0

    filters.revealTrans.Transition使用方法小结

    下面首先来看下RevealTrans的用法(可以同时打开当鼠标移动到链接,类似幻灯片效果出现提示,移开也一样这个页巩固下). 语法: filter : progid:DXImageTransform.Microsoft.RevealTrans ( enabled=bEnabled , ...

    RevealTrans

    图形特效 javascript 滤镜效果

    IE自带的网页过渡特效

    &lt;meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=0)"&gt; 盒状收缩 &lt;meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=1)"&gt; 盒状展开 &lt;meta http-equiv=...

    巧用CSS滤镜制作绚丽图片播放效果

    CSS中有revealTrans滤镜在网页中制作特效非常有用处。这次,我们准备介绍另一种使用revealTrans滤镜制作出超弦图片播放的效果。 实现思路:使用revealTrans滤镜制作出超弦图片播放的效果,并每张图片有各自的链接...

    HTML 网页页面切换的各种变换效果

    其中,n表示的就是下面的数,n取不同的值,对应有不同的效果: 0、Box in 1、Box out 2、Circle in 3、Circle out 4、Wipe up 5、Wipe down 6、Wipe right 7、Wipe left 8、Vertical blinds 9、Horizontal blinds 10...

    滤镜使用方法

    alpha,blur,chroma,dropshadow,revealtrans,shadow等方法

    java图片轮显

    在网页适当的位置添加图片,命名,如fz,并设置滤镜效果 &lt;img src="images/7.jpg" name="fz" width="320" height="480" id="fz" revealTrans(duration=2,transition=1 )"&gt; FILTER: revealTrans(duration=4,...

    aspx进入退出页面特效

    进入页面&lt;meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)"&gt; 退出页面&lt;meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)"&gt;

    CSS中的Filter样式大全及滤镜兼容问题

    CSS中的Filter样式大全及滤镜兼容问题(本人辛苦搜集)

    js实现的层变换效果

    无标题文档 #div1{ height:200px;... filter:progid:DXImageTransform.Microsoft.RevealTrans(duration=1,transition=12); background:#CCCCCC; } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    js动画效果图片切换

    js动画效果图片切换,只需要准备若干幅大小相同的图片,在页面中引用RevealTrans.js,然后把RevealTrans.htm中对应代码粘到页面中你要放图片的地方,代码中图片的路径改成你自己的,是不是很方便呢

    js使用小技巧

    s += " 网页可见区域高:"+ document.body.offsetWeight +" (包括边线的宽)"; s += " 网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)"; s += " 网页正文全文宽:"+ document.body.scrollWidth;...

    网页特效从下往上过渡 共享图库_最新图片

    div{ FILTER:revealTrans(transition=4,duration=2); POSITION:absolute; left:0px; top:32px; width:100%; visibility: visible; } 五一欢乐购 棉花 广告设计素材 结婚...

    CSS 动态链接提示

    动态的链接提示 .article { BACKGROUND-COLOR: #ffcc00;... FILTER: revealTrans(transition=23,duration=0.5) blendTrans(duration=0.5); PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; PADDING-RIGHT: 3p

    JS实现动态移动层及拖动浮层关闭的方法

    本文实例讲述了JS实现动态移动层及拖动浮层关闭的方法。分享给大家供大家参考。具体实现方法如下: &lt;html&gt; &lt;head&gt; &lt;title&gt;动态移动的层&lt;/title&gt; &lt;body bgcolor="#ADBAC9"&gt; &lt;div ...

    文字幻灯片

    &lt;!DOCTYPE html PUBLIC “-//W3C//DTD ...&lt;head&gt;&lt;title&gt;.../title&gt;...style type=”text/css”&gt;.trans {filter:revealTrans(Transition=12,Duration=2)}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;s

Global site tag (gtag.js) - Google Analytics