网页过滤效果-网页过滤效果汇总

　   网页过渡效果可以增加网站美观动感,本文收集了在IE浏览器上的所有网页过渡效果与实现代码,供大家参考:

　　首先,如果要在一个网页上应用过度效果,就先要启用网页过渡,默认情况下都已经启用了，如果需要手动启用则只需在Internet选项中：高级-浏览-启用页面过渡即可。

　　启用了过渡效果以后,以下是应用过渡效果

        过渡效果代码要在网页HEAD中加特殊的mate标签,下面是收集的效果代码:　　

　    网页进入过渡：

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

　　网页离开过渡：

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

　　接下来我们来罗列各种效果：

　　Blinds（百叶窗）

　　代码

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

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

　　Properties:bands(default=10),Direction(default="down"),Duration(nodefault)

　　Barn（扫除）

　　代码

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

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

　　Properties:duration,motion,orientation(default="vertical")

　　CheckerBoard（无数小格）

　　代码

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

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

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

　　Fade（淡入淡出）

　　代码

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

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

　　Properties:duration,overlap(default=1.0)

　　GradientWipe（渐变扫除）

　　代码

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

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

　　Properties:duration,gradientSize(default=0.25),motion

　　Inset（从一角扩散）

　　代码

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

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

　　Properties:duration

　　Iris（十字扩散）

　　代码

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

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

　　Properties:duration,irisStyle(default="PLUS"),motion

　　Pixelate（震动出来cool）

　　代码

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

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

　　Properties:duration,maxSquare(default=25)

　　RadialWipe（螺旋扩展）

　　代码

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

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

　　Properties:duration,wipeStyle(default="CLOCK")

　　RandomBars（线条遮罩）

　　代码

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

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

　　Properties:duration,orientation(default="horizontal")

　　RandomDissolve（像素遮罩cool）

　　Code

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

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

　　Properties:duration

　　Slide（拉幕）

　　代码

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

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

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

　　Spiral（向心旋转cool）

　　代码

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

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

　　Properties:duration,gridSizeX(default=16),gridSizeY(default=16)

　　Stretch（两边开幕效果）

　　代码

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

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

　　Properties:duration,stretchStyle(default="SPIN")

　　Strips（一角锯齿开幕）

　　代码

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

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

　　Properties:duration,motion

　　Wheel（十字旋转开幕）

　　代码

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

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

　　Properties:duration,spokes(default=4)

　　ZigZag（Z字形展开）

　　代码

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

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

　　Properties:duration,gridSizeX,gridSizeY

　　最后需求注意的是,以上所有的过渡效果只有在IE浏览器下有效.所以使用时请考虑清楚.

      转自网页制作教程:http://www.web2bar.cn/Article/3190.aspx

转载于:https://www.cnblogs.com/iawsky/archive/2009/02/18/1393539.html