本文將介紹十個「「酷」」 的轉場特效,希望作者精心錄製的十個Gif 轉場動畫能讓大家眼前一亮,當然更希望這些特效能能為大家設計轉場效果時能帶來一些新的「」靈感「」。
載入動畫頁面轉場特效
#❝範例說明:當頁面載入完成後,會產生酷炫的轉場特效。
範例來源:Arsen Zbidniakov
#線上網址:https://codepen.io/ARS/pen/wavXgQ
❞
「靜態效果圖」
「Gif 動態效果圖」
3D 輪播分割特效
❝範例說明:當使用者切換至下一張輪播圖的時候,會產生分割效果的3D 轉場特效。
範例來源:Paul Noble
線上網址:https://codepen.io/paulnoble/details/yVyQxv
❞
「靜態效果圖」
#「Gif 動態效果圖」
#3D 頁面翻轉特效
#❝範例說明:當使用者切換至下一個頁面時,會產生3D翻轉轉場特效。
範例來源:Robert Bue
#線上網址:https://codepen.io/robbue/pen/ugByC
❞
「靜態效果圖」
「Gif 動態效果圖」
內容縮放轉場特效
#❝範例說明:點擊選單後,顯示內容時會出現內容展開動畫。
範例來源:Tobias Glaus
線上位址:https://codepen.io/tobiasglaus/pen/oZJdZY
❞
#「靜態效果圖」
「Gif 動態效果圖」
縮圖到全螢幕轉場特效
#❝範例說明:當使用者點擊縮圖時,會透過轉場進入全螢幕模式並顯示圖片說明資訊。
範例來源:Steve Gardner
線上地址:https://codepen.io/ste-vg/pen/NALWrj
❞
「靜態效果圖」
#「Gif 動態效果圖」
#卡片擴充頁面轉場特效
#❝範例說明:點擊卡片時,會產生卡片擴充頁面轉場特效。
範例來源:Rachel Smith
線上網址:https://codepen.io/rachsmith/pen/PWxoLN
❞
「靜態效果圖」
「Gif 動態效果圖」
#單頁滾動景深特效
#❝範例說明:當在頁面中捲動滑鼠滾輪時,會產生景深轉場特效。
範例來源:Nikolay Talanov
線上網址:https://codepen.io/suez/pen/JoWKKX
❞
「靜態效果圖」
#「Gif 動態效果圖」
單頁滾動傾斜特效
#❝範例說明:當在頁面中捲動滑鼠滾輪時,會產生傾斜轉場特效。
範例來源:Nikolay Talanov
#線上網址:https://codepen.io/suez/pen/gadLre
❞
「靜態效果圖」
#「Gif 動態效果圖」
#六角形圓板過渡特效
#❝範例說明:當使用者點擊頁面上的六邊形時,會產生圓板過渡轉場特效。
範例來源:Ryan Mulligan
線上網址:https://codepen.io/hexagoncircle/details/MKaVzM
❞
「靜態效果圖」
#「Gif 動態效果圖」
黏性邊緣特效
#❝範例說明:當使用者切換到下一張圖片的時候,會產生黏性邊緣的轉場特效。
範例來源:Zoey Fan
線上網址:https://codepen.io/zoeyfan/pen/ExVaXGK
❞
「靜態效果圖」
#「Gif 動態效果圖」
原文網址:https://juejin.cn/post/6847009772672122894
作者:阿寶哥
更多程式設計相關知識,請造訪:程式設計入門! !
以上是10個值的收藏的酷炫轉場特效的詳細內容。更多資訊請關注PHP中文網其他相關文章!