被忽視的META標簽之特效(頁面過渡效果)
來源:易賢網(wǎng) 閱讀:2896 次 日期:2016-06-21 11:43:15
溫馨提示:易賢網(wǎng)小編為您整理了“被忽視的META標簽之特效(頁面過渡效果)”,方便廣大網(wǎng)友查閱!

在web設(shè)計中使用js可以實現(xiàn)很多的頁面特,HTML標簽中META標簽其實也可以實現(xiàn)很多漂亮的頁面過渡效果,本文整理了一些常用的特效,感興趣的朋友可以參考下,希望對大家有所幫助

在web設(shè)計中使用js可以實現(xiàn)很多的頁面特效,然而很多人卻忽視了HTML標簽中META標簽的強大功效,其實meta標簽也可以實現(xiàn)很多漂亮的頁面過渡效果。

META標簽是HTML語言HEAD區(qū)的一個輔助性標簽,Meta 標簽放在每個網(wǎng)頁的<head>...</head>

中間,我們大家比較熟悉的如:

<meta name="GENERATOR" content="Microsoft FrontPage 3.0">//說明編輯工具;

<meta name="KEYWORDS" content="...">//說明關(guān)鍵詞;

<meta name="DESCRIPTION" content="...">//說明主頁描述;

它提供用戶不可見的信息。meta標簽通常用來為搜索引擎robots定義頁面主題,或者是定義用戶瀏覽器上的cookie;它可以用于鑒別作者,設(shè)定頁面格式,標注內(nèi)容提要和關(guān)鍵字;還可以設(shè)置頁面使其可以

根據(jù)你定義的時間間隔刷新自己,以及設(shè)置RASC內(nèi)容等級,等等

本文主要闡述如何使用meta標簽,產(chǎn)生頁面過渡效果.....

用法:

<Meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)">

<Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">

blendTrans是css動態(tài)濾鏡的一種,產(chǎn)生漸隱效果。另一種動態(tài)濾鏡RevealTrans也可以用于頁面進入與退出效果:

動態(tài)濾鏡可以為頁面添加動人的淡入淡出、圖象轉(zhuǎn)化效果,它可以分為兩種blend(混合)和reveal(顯示),

前者可以使對象漸漸消失或出現(xiàn),后者提供了24種圖象轉(zhuǎn)化的效果......

<Meta http-equiv="Page-Enter" Content="revealTrans(duration=x, transition=y)">

<Meta http-equiv="Page-Exit" Content="revealTrans(duration=x, transition=y)">

Duration:表示濾鏡特效的持續(xù)時間(單位:秒)

Transition:濾鏡類型。表示使用哪種特效,取值為0-23。

名單

網(wǎng)頁變換效果只要搭配得當,這些變換效果會給訪客留下非常深刻的印象,即使是那些本來對你的站點沒興趣的訪客。特別是喜歡學習網(wǎng)頁制作的朋友,很可能就把 你的網(wǎng)頁復(fù)制下來,以供學習研究之用。其實你不過是加了短短一段代碼而已^_^ 網(wǎng)頁變換效果(Trans)共分四大類:"進入網(wǎng)頁"(Page-Enter)、"離開網(wǎng)頁"(Page-Exit)、"進入站點"(Site- Enter)、"離開站點"(Site-Exit)。每一大類又分為25個小類,先用進入網(wǎng)頁效果來舉例說明:

進入網(wǎng)頁時的效果

1.混合效果 代碼如下: <meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">

2.盒狀收縮效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=0)">

3.盒狀放射效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=1)">

4.圓形收縮效果 代碼如下:<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=2)">

5.圓形放射效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=3)">

6.向上擦除效果 代碼如下:<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)">

7.向下擦除效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=4)">

8.向右擦除效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=6)">

9.向左擦除效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=7)">

10.垂直遮蔽效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=8)">

11.水平遮蔽效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=9)">

12.橫向棋盤式效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=10)">

13.縱向棋盤式效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=11)">

14.隨即分解效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=12)">

15.左右向中央縮進效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=13)">

16.中央向左右擴展效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=14)">

17.上下向中央縮進效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=16)">

18.中央向上下擴展效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=17)">

19.從左下抽出效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=18)">

20.從左上抽出效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=19)">

21.從右下抽出效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=20)">

22.從右上抽出效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=21)">

23.隨機水平線條效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)">

24.隨機垂直線條效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=22)">

25.隨機效果 代碼如下: <meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=23)">

現(xiàn)在讓我們來分析一下這些代碼,首先大家一定能看出這些代碼大多數(shù)地方很相似。事實上,雖然分類很多,但每個大類下的25個小類是分別對應(yīng)相同的,并且用 數(shù)字來標識,(除了混合效果 blendTrans(Duration=1.0)),所以不用對沒個大類一一舉例說明,只要把"Page-Enter"換為"Page-Exit"(離 開網(wǎng)頁)、"Site-Enter"(進入站點)、"Site-Exit"(離開站點),就可以達到需要的效果了,同時記憶起來也比較方便。其 中"Duration=1.0"可以設(shè)定每個周期的時間為多久,單位是秒(現(xiàn)在設(shè)置的是每周期1秒)。 需要注意的是四個大類的效果可以在一個網(wǎng)頁里同時設(shè)置,但每個大類只能設(shè)置一種效果。另外如果網(wǎng)頁是幀頁的話,也將無法顯示出效果。

更多信息請查看網(wǎng)頁制作
易賢網(wǎng)手機網(wǎng)站地址:被忽視的META標簽之特效(頁面過渡效果)
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇剩?/div>

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 加入群交流 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號:hfpxwx
咨詢QQ:526150442(9:00—18:00)版權(quán)所有:易賢網(wǎng)