HTML頁面過渡效果大全，頁面過渡大全

最後更新：2015-04-11 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

HTML頁面過渡效果大全，頁面過渡大全

IE要求:

　　在IE5.5及以上版本的瀏覽器中.

啟用網頁過渡效果

　　預設情況下都已經啟用了，如果需要手動啟用則只需在Internet選項中： Advanced（進階） - Browsing（瀏覽） - Enable page transitions（啟用頁面過渡）即可。

應用過渡效果

　　當我們需要添加過渡效果時，只需在<head>中添加一個特殊的<meta>即可，比如：

一.先介紹下參數:

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 : 隨機使用上面可能的值轉換。

二.下面介紹具體的例子啦:

混合 (淡入淡出)

　　<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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

HTML頁面過渡效果大全，頁面過渡大全

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support