HTML页面过渡效果大全

  • Post author:
  • Post category:其他


转自:

点击打开链接

试了下没效果。。先存着。

——————————————————————————————————————————-

大家经常在网站上看到一些很不错的特效,其实马上想到的就是 Javascript 或是 Flash …没错…但通过写 Javascript 来获得特效并非易事,设计 Flash 何尝也不是这样…其实大家要好好利用下 HTML 本身有的页面效果…接下来就来看看吧..(~ o ~)~zZ

怎么做呢,其实很简单,就利用文本头的 <meta> 标记中,具体 meta 标记作用这里就不介绍,这里重点说明它如何实现页面过渡效果…



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