html 过渡效果合集(转)

(转自:http://www.cnblogs.com/sukiwqy/archive/2009/12/05/1617771.html)

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

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

IE要求:

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

启用网页过渡效果

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

应用过渡效果

当我们需要添加过渡效果时,只需在中添加一个特殊的即可,比如:

一.先介绍下参数:

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 : 随机使用上面可能的值转换。

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

混合 (淡入淡出)

盒状收缩

盒状展开

圆形收缩

圆形放射

向上擦除

向下擦除

向右擦除

向左擦除

垂直遮蔽

水平遮蔽

横向棋盘式

纵向棋盘式

随机溶解

左右向中央缩进

中央向左右扩展

上下向中央缩进

中央向上下扩展

从左下抽出

从左上抽出

从右下抽出

从右上抽出

随机水平线条

随机垂直线条

随机

三.其他过渡效果:

Blinds(百叶窗)

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

Barn(扫除)

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

CheckerBoard(无数小格)

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

Fade(淡入淡出)

属性: duration, overlap (default=1.0)

GradientWipe(渐变扫除)

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

Inset(从一角扩散)

属性: duration

Iris(十字扩散)

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

Pixelate(震动出来)

属性: duration, maxSquare (default=25)

RadialWipe(螺旋扩展)

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

RandomBars(线条遮罩)

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

RandomDissolve(像素遮罩)

属性: duration

Slide(拉幕)

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

Spiral(向心旋转)

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

Stretch(两边开幕效果)

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

Strips(一角锯齿开幕)

属性: duration, motion

Wheel(十字旋转开幕)

属性: duration, spokes (default=4)

ZigZag(Z字形展开)

属性: duration, gridSizeX, gridSizeY

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,497评论 19 139
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,225评论 4 61
  • 1.自定义控件 a.继承某个控件 b.重写initWithFrame方法可以设置一些它的属性 c.在layouts...
    圍繞的城阅读 8,931评论 2 4
  • 1、首先在3dmax里制作一个压扁的球体,翻转法线朝里,并赋予全景图材质球。 2、仅影响轴居中到对象,后z轴归零,...
    罗斯基阅读 3,452评论 0 0
  • Exhausting day. My shouder is going out, just wanna kick ...
    Lifefullofjoy阅读 1,716评论 1 2