页面转换(过渡)的渐变效果

昨天在上逛着玩时,发现页面渐变的转换效果挺漂亮(什么?你没看到,那你刷新本网页试试,注意:该效果目前只在IE下有效),不安份的我就打开了安安的Blog的源代码(Oh!原谅我的好奇),一行行的查找,原本以为这应该是用JS来完成的,结果我经过仔细比照以后,才发现,问题的源头原来是来自最不起眼的Meta标签,有点意思,去网上一查,原来Meta标签不只有标注网页描述,定义网页关健字这样的有利于SEO的功能,他还能让网页拥有一些特殊的效果,这种页面渐变的转换效果也是其中之一。

PS:本文适合有一定Html基础的朋友阅读,如果你不了解Html,但又很感兴趣,那可以先看看这个教程

使用方法很简单:

Page-Enter、Page-Exit (进入与退出)
说明:这个是页面被载入和调出时的一些特效。
用法:<Meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)">
   <Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">
   注意:blendTrans是动态滤镜的一种,产生渐隐效果。另一种动态滤镜RevealTrans也可以用于页面进入与退出效果:

<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种随机选择一种

 

怎么样,简单吧,每一个都试试吧,记得一定要把Meta标签放到<head></head>之间

附:Meta标签的使用方法:http://429006.com/blog/article.asp?id=248

Related Posts