HTML页面过渡效果大全
来源:互联网 发布:怎么健身 知乎 编辑:程序博客网 时间:2024/05/01 06:18
大家经常在网站上看到一些很不错的特效,其实马上想到的就是 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-Exit : 离开页面
Site-Enter : 进入网站
Site-Exit : 离开网站
content 当然就是内容咯,这里表示页面过渡的效果设置,这里的两个属性表示分别表示
Duration : 过渡速度
Transition : 可选项。整数值(Integer)。设置或检索转换所使用的方式
具体数值介绍:
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页面过渡效果大全
- HTML页面过渡效果大全
- HTML页面过渡效果大全
- 第23节 html页面过渡效果
- 页面过渡效果
- 页面过渡效果
- Flash页面过渡效果之百叶窗
- JQuery Mobile 页面过渡效果设置
- JQuery Mobile 页面过渡效果设置
- jQuery实现的加载页面过渡效果
- 页面过渡效果牛X级
- META标签特效(页面过渡效果)
- html页面技巧大全
- HTML页面技巧大全
- html页面特效代码大全
- html页面特效代码大全
- HTML页面技巧大全
- HTML页面放大镜效果
- gem5全系统模拟
- USACO1.2.3 Name That Number (namenum)
- 韓長庚 易經大意 目次
- 杭电acm:最小公倍数(附源码)
- Objective - C基础: 第五天 - 4.@property - 内存管理
- HTML页面过渡效果大全
- getopt和getopt_long函数
- Android动态加载XML文件及控件来简单实现QQ好友印象的功能
- 新建Maven+Spring项目错误集锦
- uva 11384 Help is needed for Dexter(模拟)
- [Java]Eclipse配置JDK的图解步骤
- USACO1.2.4 Palindromic Squares (palsquare)
- Codeforces Round #276 (Div. 2) Factory
- Populating Next Right Pointers in Each Node II