IE要求:

　　在IE5.5及以上版本的浏览器中.

启用网页过渡效果

　　默认情况下都已经启用了，如果需要手动启用则只需在Internet选项中： Advanced（高级） - Browsing（浏览） - Enable page transitions（启用页面过渡）即可。

应用过渡效果

　　当我们需要添加过渡效果时，只需在<head>中添加一个特殊的<meta>即可，比如：

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

一.先介绍下参数: 

http-equiv 作用很多,这里的值为 Page-Enter 是指在页面进入的时候发生,其他值还有:

Page-Enter : 进入页面

Page-Exit  : 离开页面

Site-Enter : 进入网站

Site-Exit  : 离开网站

content 当然就是内容咯,这里表示页面过渡的效果设置,这里的两个属性表示分别表示
       Duration  : 过渡速度
       Transition : 可选项。整数值(Integer)。设置或检索转换所使用的方式

具体数值介绍:

0 : 矩形收缩转换。

1 : 矩形扩张转换。

2 : 圆形收缩转换。

3 : 圆形扩张转换。 
       4 : 向上擦除。 
       5 : 向下擦除。 
       6 : 向右擦除。 
       7 : 向左擦除。 
       8 : 纵向百叶窗转换。 
       9 : 横向百叶窗转换。 
       10 : 国际象棋棋盘横向转换。 
       11 : 国际象棋棋盘纵向转换。 
       12 : 随机杂点干扰转换。 
       13 : 左右关门效果转换。 
       14 : 左右开门效果转换。 
       15 : 上下关门效果转换。 
       16 : 上下开门效果转换。 
       17 : 从右上角到左下角的锯齿边覆盖效果转换。 
       18 : 从右下角到左上角的锯齿边覆盖效果转换。 
       19 : 从左上角到右下角的锯齿边覆盖效果转换。 
       20 : 从左下角到右上角的锯齿边覆盖效果转换。 
       21 : 随机横线条转换。 
       22 : 随机竖线条转换。 
       23 : 随机使用上面可能的值转换。

二.下面介绍具体的例子啦:

混合 (淡入淡出)

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

盒状收缩

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

盒状展开

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

圆形收缩

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

圆形放射

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

向上擦除

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

向下擦除

　　<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=5)" />

向右擦除

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

向左擦除

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

垂直遮蔽

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

水平遮蔽

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

横向棋盘式

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

纵向棋盘式

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

随机溶解

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

左右向中央缩进

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

中央向左右扩展

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

上下向中央缩进

　　<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=15)" />

中央向上下扩展

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

从左下抽出

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

从左上抽出

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

从右下抽出

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

从右上抽出

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

随机水平线条

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

随机垂直线条

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

随机

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

三.其他过渡效果:

Blinds（百叶窗）

　　<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Blinds(Duration=2)" />

　　<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Blinds(Duration=2)" />

　　　　属性: bands (default=10), Direction (default="down"), Duration ( no default)

Barn（扫除）

　　<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Barn(Duration=2)" />

　　<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Barn(Duration=2)" />

　　　　属性: duration, motion, orientation (default="vertical")

CheckerBoard（无数小格）

　　<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.CheckerBoard(Duration=2)" />

　　<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.CheckerBoard(Duration=2)" />

　　　　属性: Direction (default="right"), squaresX (default=12), squaresY (default=10)

Fade（淡入淡出）

　　<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Fade(Duration=2)" />

　　<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(Duration=2)" />

　　　　属性: duration, overlap (default=1.0)

GradientWipe（渐变扫除）

　　<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.GradientWipe(Duration=2)" />

　　<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.GradientWipe(Duration=2)" />

　　　　属性: duration, gradientSize (default=0.25), motion

Inset（从一角扩散）

　　<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Inset(Duration=2)" />

　　<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Inset(Duration=2)" />

　　　　属性: duration

Iris（十字扩散）

　　<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Iris(Duration=2)" />

　　<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Iris(Duration=2)" />

　　　　属性: duration, irisStyle (default="PLUS"), motion

Pixelate（震动出来）

　　<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Pixelate(Duration=2)" />

　　<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Pixelate(Duration=2)" />

　　　　属性: duration, maxSquare (default=25)

RadialWipe（螺旋扩展）

　　<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RadialWipe(Duration=2)" />

　　<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RadialWipe(Duration=2)" />

　　　　属性: duration, wipeStyle (default="CLOCK")

RandomBars（线条遮罩）

　　<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RandomBars(Duration=2)" />

　　<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RandomBars(Duration=2)" />

　　　　属性: duration, orientation (default="horizontal")

RandomDissolve（像素遮罩）

　　<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2)" />

　　<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2)" />

　　　　属性: duration

Slide（拉幕）

　　<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Slide(Duration=2)" />

　　<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Slide(Duration=2)" />

　　　　属性: bands (default=1), duration, slideStyle (default="SLIDE")

Spiral（向心旋转）

　　<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Spiral(Duration=2)" />

　　<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Spiral(Duration=2)" />

　　　　属性: duration, gridSizeX (default=16), gridSizeY (default=16)

Stretch（两边开幕效果）

　　<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Stretch(Duration=2)" />

　　<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Stretch(Duration=2)" />

　　　　属性: duration, stretchStyle (default="SPIN")

Strips（一角锯齿开幕）

　　<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Strips(Duration=2)" />

　　<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Strips(Duration=2)" />

　　　　属性: duration, motion

Wheel（十字旋转开幕）

　　<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Wheel(Duration=2)" />

　　<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Wheel(Duration=2)" />

　　　　属性: duration, spokes (default=4)

ZigZag（Z字形展开）

　　<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.ZigZag(Duration=2)" />

　　<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.ZigZag(Duration=2)" />

　　　　属性: duration, gridSizeX, gridSizeY

HTML页面过渡效果大全的更多相关文章

  1. ios页面过渡效果插件Kontext

    效果体验:http://keleyi.com/keleyi/phtml/html5/28.htm 以下是代码: <!doctype html> <html> <head& ...

  2. 基于Jquery的页面过渡效果(原创)

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...

  3. js跳转页面方法大全

    js跳转页面方法大全<span id="tiao">3</span><a href="javascript:countDown"& ...

  4. 网站开发进阶(二十六)js刷新页面方法大全

    js刷新页面方法大全 在项目开发过程中,需要实现刷新页面.经过学习,发现下面这条语句就可以轻松实现. location.reload(); // 刷新页面 有关刷新页面的其它方法,具体学习内容如下,有 ...

  5. 被忽视的META标签之特效(页面过渡效果)

    在web设计中使用js可以实现很多的页面特效,然而很多人却忽视了HTML标签中META标签的强大功效,其实meta标签也可以实现很多漂亮的页面过渡效果. META标签是HTML语言HEAD区的一个辅助 ...

  6. 15个CSS3和jQuery的超棒页面过渡效果教程

    来源:GBin1.com CSS3和jQuery从根本上改变了网页设计和程序开发.通过CSS3和jQuery,设计员和开发者不需要太多的精力或编码,就可以创造出非常 美丽令人叹惊的效果,同时还可以令你 ...

  7. js刷新页面方法大全（转）

    刷新页面实现方式总结(HTML,ASP,JS) 转载  2008-11-13   作者:    我要评论 多种方法实现页面的刷新代码 定时刷新: 1,<script>setTimeout( ...

  8. js刷新页面方法大全

    如何实现刷新当前页面呢?借助js你将无所不能. 1,reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet])   参数: bForceGet, ...

  9. CSS3与页面布局学习总结（四）——页面布局大全

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

随机推荐

  1. html json 导出Excel

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 【git】之修改git仓库地址

    方法1 git remote set-url origin <url> 方法2 git remote rm origin git remote add origin [url] 方法三 直 ...

  3. bzoj4940: [Ynoi2016]这是我自己的发明

    用dfs序把询问表示成询问dfs序的两个区间中的信息 拆成至多9个询问(询问dfs序的两个前缀),对这些询问用莫队处理,时间复杂度$O(n\sqrt{m})$ #include<bits/std ...

  4. ActionScript3.0实现动态地图效果

    14年的一个项目需求,研究了一下AS脚本.AS2.0是之前面向关系的语言,AS3.0之后开始走上面向对象路线. 现在附上当时的代码,里边包含很多细节和算法,重要的代码也都有注释,如果需要可以仔细看一下 ...

  5. Bisecting KMeans (二分K均值)算法讲解及实现

    算法原理 由于传统的KMeans算法的聚类结果易受到初始聚类中心点选择的影响,因此在传统的KMeans算法的基础上进行算法改进,对初始中心点选取比较严格,各中心点的距离较远,这就避免了初始聚类中心会选 ...

  6. [转][Oracle]常见报错及处理

    IIS 在安装 Oracle Client 后,需要命令行执行: iisreset 1.ORA-00257 参考自:https://jingyan.baidu.com/article/f71d6037 ...

  7. [VS2013]发布网站时修改配置文件

    本文来自:https://msdn.microsoft.com/en-us/library/ee942158.aspx#encrypt_webconfig Web Deployment FAQ for ...

  8. Jmeter（二十九）Jmeter-Question之“Ant集成报告模板优化”

    也是在和朋友探讨的时候,发现一个问题,Jmeter在与Ant集成的时候,通常选用的模板是jmeter自带的两个样式表 该自带的样式,节省了大家搭建框架的时间,不需要自己重新写样式,当然也相对简洁: 做 ...

  9. Java调用R语言

    R是统计计算的强大工具,JAVA是做应用系统的主流语言.JAVA负责系统的构建,R用来做运算引擎,从而实现应用型和分析性相结合的系统. 一.Rserve(远程通信模式) Rserve是一个基于TCP/ ...

  10. 用wiershark抓dns数据包

    wireshark是非常好的抓包工具,捕获工具也很强大.比如说我只要抓dns数据包,其他数据包全部丢弃. 步骤如下: 选择菜单->捕获-捕获接口-输入-所选择接口的捕获过滤器:port 53 1 ...