CSS3 Transition 3D選單效果

CSS3 menu憑藉著 的 transition 屬性,就能輕鬆達到一些以往需要使用程式才能達到的效果,且更快更方便!在這篇文章所提供的5個範例中,從基本的 CSS3 transition 淡入淡出效果,到 CSS3 transition + CSS3 transform 3D 效果都包涵在內了,當作個基本學習範例來說應該是很簡單的,各位可以看看影片出來的效果或者是直接點擊下方連結來看看實際頁面效果.

DEMO1 的效果是採用 CSS3 transition 屬性來製作簡單的淡入淡出,主要差異在於不同屬性的延遲設定,以達成我們所要的效果外,因為沒有使用display:none,所以對於SEO也不會造成任何影響,整體當然是有加分的啦.

觀看DEMO1範例

DEMO2 則是添加了滑動效果進去,一樣使用 CSS3 transition 製作好方便效果的呈現,此效果讓我們的第二層選單依靠著 margin 設定的差異,就達到的滑動效果囉~同樣的!對於SEO也不造成任何影響,若是想要選單的效果如同影片一樣效果強烈的話,那麼需要注意到 Margin 的設定要差異大一點,但這樣選單就必須要浮在最上面才不會露餡噢~

觀看DEMO2範例

DEMO3 幫第二層選單添加了彈性的效果,這裡採用了 CSS3 transition 中的速度設定,有了速度設定後,整個子選單就會 ㄉㄨ ㄞㄉㄨ ㄞ 的很有彈性喔~如果覺得效果不夠強烈的話,各位也可以自行修改貝茲曲線中的數值喔.

觀看DEMO3範例

DEMO4 此範例開始加入 transform 3D 效果囉,不僅把前面的效果保留,也添加了 3D Flip 左右翻頁的視覺設計,搭配了速度設定之後,效果頗特別的(個人感覺啦XD),姑且不管實用性好不好,寫的快樂最重要囉~就保留了這個效果分享給大家.

觀看DEMO4範例

DEMO5 最後的範例來一個 Transition 3D 常見翻頁類型效果,只要對 CSS 的定位概念清楚的話,要做出這個標準的 CSS 3D 效果是很簡單的,所以大家就隨意看看囉

觀看DEMO5範例