HTML5网页设计

html_css

HTML页面过渡效果大全

时间:2012-10-01 22:56来自:网络作者:admin点击:
大家经常在网站上看到一些很不错的特效,其实马上想到的就是 Javascript 或是 Flash ...没错...但通过写 Javascript 来获得特效并非易事,设计 Flash 何尝也不是这样...其实大家要好好利用下 HTML 本身有的页面效果...接下来就来看看吧..

大家经常在网站上看到一些很不错的特效,其实马上想到的就是 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 : 随机使用上面可能的值转换。

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

当前文章地址:http://www.shejicool.com/web/html_css/366.html

阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐