24種頁面切換效果詳解

2021-08-30 07:29:11 字數 1630 閱讀 2231

24種頁面切換效果詳解

使用格式:

duration=時間

transitionv=方式

page-enter

說明:duration為頁面切換的時間長度,3.000表示3秒鐘,一般可以直接輸入3便可;transition為切換效果,從1-23共22種不同的切換效果,其中23為隨機效果。

效果  content  transitionv

盒狀收縮 revealtrans 0 

盒狀展開  revealtrans 1

圓形收縮  revealtrans 2 

圓形展開 revealtrans 3

向上擦除 revealtrans 4

向下擦除 revealtrans 5

向左擦除 revealtrans 6

向右擦除 revealtrans 7

垂直百頁窗 revealtrans 8

水平百頁窗 revealtrans 9

橫向棋盤式 revealtrans 10

縱向棋盤式 revealtrans 11

溶解 revealtrans 12

左右向中部收縮 revealtrans 13

中部向左右展開 revealtrans 14

上下向中部收縮 revealtrans 15

中部向上下展開 revealtrans 16

階梯狀向左下展開 revealtrans 17

階梯狀向左上展開 revealtrans 18

階梯狀向右下展開 revealtrans 19

階梯狀向右上展開 revealtrans 20

隨機水平線 revealtrans 21

隨機垂直線 revealtrans 22

隨機 revealtrans 23

除了上面兩個引數,還有乙個http-equiv: 

http-equiv="page-exit"的意思是指頁面離開時產生效果。

它有一種寫法,如:

http-equiv="page-enter"則是指頁面進入時產生的效果。

頁面淡入淡出效果**為:

http-equiv 標籤說明:

meta 本元件卷標大多用來,描述那些與內容無關,但與檔案本身有關的各種資訊,但只能放於....內。

http-equiv http標頭(head)的名稱,表示某些資訊需要傳給伺服器。

="page-enter" 網頁進入時要展示的效果;

="page-exit" 網頁脫離時要展示的效果。

content= meta 資訊的內容。

="revealtrans 轉換link標籤的反向關聯。

duration=2.0 期間。

transition=n 要展示的效果種類,n值詳上表功能。

="refresh" 轉換、更新或重整。

content="15 15秒後執行。

url=../choice.htm" 所指定要轉換的網頁路徑及檔名。

您若不加入第三段http-equiv=="refresh"語法,也可造成手動切換效果。

本網頁切換特效限ie使用

Activity頁面切換效果

從上圖可以看出,以手機螢幕下面邊未x軸,螢幕左邊為y軸,當activity在x軸值為 100 p時,剛好在螢幕的左邊 位置1 當x軸值為0 p時,剛好再螢幕內 位置2 當x 100 p時剛好在螢幕右邊 位置3 enteranim 定義activity進入螢幕時的動畫 exitanim 定義activ...

頁面之間的卷滾切換效果

一般來說要根據布局的結構來,大體有2種 1.移動父容器,改變父容器的座標 2.移動每乙個子容器的座標 顯而易見,移動父容器簡單很多,只需要改變父容器x軸的座標就可以了。如果父容器中子元素有很多的話,那麼我們會考慮第二種演算法,可以做成動態載入,但是這種處理是超級麻煩,這裡不討論 改變座標的處理可以分...

Vue實現移動端頁面切換效果

在子頁面把整個頁面做絕對定位,覆蓋整個螢幕,子父頁面將 router view 用 transition 套起來,並加上過渡動畫就可以啦。效果 有乙個問題需要注意一下,我們知道,在應用transform屬性的時候,fixed定位會變成absolute。這裡,頁面轉換的時候,就變成了相對transla...