网页幻灯片过渡效果大全（淡入淡出、开幕、星状散射……共17种）(IE page transitions)

IE网页过渡效果

 

原文地址： http://www.jansfreeware.com/articles/ie-page-transitions.html

 

在IE5.5及以上版本的浏览器中，我们可以设置整页过渡效果，据此，我们甚至可以用IE来代替PPT了。

 

启用网页过渡

 

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

 

应用过渡效果

 

当我们需要添加过渡效果时，只需在<head>中添加一个特殊的<meta>即可，比如：

复制代码
网页进入过渡：
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2)">

网页离开过渡：

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


复制代码

 

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

 

Blinds（百叶窗）

Code

 

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

Barn（扫除）

Code

 

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

CheckerBoard（无数小格）


Code


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

Fade（淡入淡出）

Code

 

Properties: duration, overlap (default=1.0)

GradientWipe（渐变扫除）

Code

 

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

Inset（从一角扩散）

Code

 

Properties: duration

Iris（十字扩散）


Code


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

Pixelate（震动出来cool）


Code


Properties: duration, maxSquare (default=25)

RadialWipe（螺旋扩展）


Code


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

RandomBars（线条遮罩）


Code


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

RandomDissolve（像素遮罩cool）


Code


Properties: duration

Slide（拉幕）

Code

 

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

Spiral（向心旋转cool）

Code

 

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

Stretch（两边开幕效果）

Code

 

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

Strips（一角锯齿开幕）

Code

 

Properties: duration, motion

Wheel（十字旋转开幕）

Code

 

Properties: duration, spokes (default=4)

ZigZag（Z字形展开）

Code

 

Properties: duration, gridSizeX, gridSizeY


 

注意：上述所有效果都只支持IE的




posted @   LanceZhang  阅读(10119)  评论(1)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
点击右上角即可分享
微信分享提示