打开网页渐变效果

打开网页渐变效果

2012-5-11  220次浏览  转载

网页变换效果（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)">

现在让我们来分析一下这些代码，首先大家一定能看出这些代码大多数地方很相似。事实上，虽然分类很多，但每个大类下的25个小类是分别对应相同的，并且用数字来标识，（除了混合效果 blendTrans(Duration=1.0)），所以不用对没个大类一一举例说明，只要把“Page-Enter”换为“Page-Exit”（离开网页）、“Site-Enter”（进入站点）、“Site-Exit”（离开站点），就可以达到需要的效果了，同时记忆起来也比较方便。其中“Duration=1.0”可以设定每个周期的时间为多久，单位是秒（现在设置的是每周期1秒）。

需要注意的是四个大类的效果可以在一个网页里同时设置，但每个大类只能设置一种效果。另外如果网页是帧页的话，也将无法显示出效果。
只要搭配得当，这些变换效果会给访客留下非常深刻的印象，即使是那些本来对你的站点没兴趣的访客。特别是喜欢学习网页制作的朋友，很可能就把你的网页复制下来，以供学习研究之用。其实你不过是加了短短一段代码而已^_^

  
  
<Meta http-equiv="Page-Enter" Content="revealTrans(duration=x, transition=y)"> 
<Meta http-equiv="Page-Exit" Content="revealTrans(duration=x, transition=y)">

Duration表示滤镜特效的持续时间(单位：秒) 
Transition滤镜类型。表示使用哪种特效，取值为0-23。
0 矩形缩小
1 矩形扩大
2 圆形缩小
3 圆形扩大
4 下到上刷新
5 上到下刷新
6 左到右刷新
7 右到左刷新
8 竖百叶窗
9 横百叶窗
10 错位横百叶窗
11 错位竖百叶窗
12 点扩散
13 左右到中间刷新
14 中间到左右刷新
15 中间到上下
16 上下到中间
17 右下到左上
18 右上到左下
19 左上到右下
20 左下到右上
21 横条
22 竖条
23 以上22种随机选择一种

Tags： 基础知识

本篇文章非原创，转载自 http://alanyr.blog.163.com/blog/static/1810884532011102914712207/