html 過渡效果合集(轉)

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

大家經常在網站上看到一些很不錯的特效,其實馬上想到的就是 Javascript 或是 Flash ...沒錯...但通過寫 Javascript 來獲得特效并非易事,設計 Flash 何嘗也不是這樣...其實大家要好好利用下 HTML 本身有的頁面效果...接下來就來看看吧..(~ o ~)~zZ

怎么做呢,其實很簡單,就利用文本頭的 標記中,具體 meta 標記作用這里就不介紹,這里重點說明它如何實現(xiàn)頁面過渡效果...

IE要求:

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

啟用網頁過渡效果

默認情況下都已經啟用了,如果需要手動啟用則只需在Internet選項中: Advanced(高級) - Browsing(瀏覽) - Enable page transitions(啟用頁面過渡)即可体谒。

應用過渡效果

當我們需要添加過渡效果時全跨,只需在中添加一個特殊的即可痛垛,比如:

一.先介紹下參數(shù):

http-equiv作用很多,這里的值為 Page-Enter 是指在頁面進入的時候發(fā)生,其他值還有:

Page-Enter : 進入頁面

Page-Exit? : 離開頁面

Site-Enter : 進入網站

Site-Exit? : 離開網站

content當然就是內容咯,這里表示頁面過渡的效果設置,這里的兩個屬性表示分別表示

Duration? : 過渡速度

Transition : 可選項。整數(shù)值(Integer)中燥。設置或檢索轉換所使用的方式

具體數(shù)值介紹:

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(無數(shù)小格)

屬性: 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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末撩鹿,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子悦屏,更是在濱河造成了極大的恐慌节沦,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件础爬,死亡現(xiàn)場離奇詭異甫贯,居然都是意外死亡,警方通過查閱死者的電腦和手機看蚜,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進店門叫搁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人供炎,你說我怎么就攤上這事渴逻。” “怎么了音诫?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵惨奕,是天一觀的道長。 經常有香客問我竭钝,道長梨撞,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任香罐,我火速辦了婚禮卧波,結果婚禮上,老公的妹妹穿的比我還像新娘穴吹。我一直安慰自己幽勒,他們只是感情好,可當我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布港令。 她就那樣靜靜地躺著啥容,像睡著了一般。 火紅的嫁衣襯著肌膚如雪顷霹。 梳的紋絲不亂的頭發(fā)上咪惠,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天,我揣著相機與錄音淋淀,去河邊找鬼遥昧。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的炭臭。 我是一名探鬼主播永脓,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼鞋仍!你這毒婦竟也來了常摧?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤威创,失蹤者是張志新(化名)和其女友劉穎落午,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體肚豺,經...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡溃斋,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了吸申。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片梗劫。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖呛谜,靈堂內的尸體忽然破棺而出在跳,到底是詐尸還是另有隱情,我是刑警寧澤隐岛,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站瓷翻,受9級特大地震影響聚凹,放射性物質發(fā)生泄漏。R本人自食惡果不足惜齐帚,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一妒牙、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧对妄,春花似錦湘今、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至孝常,卻和暖如春旗们,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背构灸。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工上渴, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓稠氮,卻偏偏與公主長得像曹阔,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子隔披,可洞房花燭夜當晚...
    茶點故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內容

  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理次兆,服務發(fā)現(xiàn),斷路器锹锰,智...
    卡卡羅2017閱讀 134,651評論 18 139
  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫芥炭、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,093評論 4 62
  • 1.自定義控件 a.繼承某個控件 b.重寫initWithFrame方法可以設置一些它的屬性 c.在layouts...
    圍繞的城閱讀 3,385評論 2 4
  • 1恃慧、首先在3dmax里制作一個壓扁的球體园蝠,翻轉法線朝里,并賦予全景圖材質球痢士。 2彪薛、僅影響軸居中到對象,后z軸歸零怠蹂,...
    羅斯基閱讀 502評論 0 0
  • Exhausting day. My shouder is going out, just wanna kick ...
    Lifefullofjoy閱讀 234評論 1 2