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

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>

<!--自定义字段-->
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Viggo.Lee

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值