太贊了！超炫的頁面切換動畫效果【附源碼下載下傳】

　　今天我們想與大家分享一組創意的頁面切換熊效果集合。我們已經在示例中羅列了一組動畫，可以被應用到頁面切換過程中，創造出很有趣的導航效果。雖然有些效果都非常簡單，隻是簡單的滑動動作，但另外的一些則是利用了視角（Perspective）和 3D 轉換（3D Transforms）來創造一些立體動感的效果。

　　

　　溫馨提示：為保證最佳的效果，請在 IE10+、Chrome、Firefox 和 Safari 等現代浏覽器中浏覽。

　　CSS 動畫根據它們的實作的效果分為不同的組。為展示頁面過渡效果，我們使用以下結構：

　　透視容器的位置是相對的，我們增加1200像素透視它。所有動畫效果都需要以下的樣式：

　　上面的 .pt-page-ontop 樣式用于某些頁面過渡效果，即我們需要讓一個頁面留在另一個頁面的頂部。下面是一個代碼例子，展示了動畫類和關鍵幀動畫，在不同方向上縮放網頁和以及淡入淡出效果：

　　對于本示範的目的，我們采用了相應的動畫類應用到目前頁以及即将切換進來的頁面，例如：

　　檢視示範，您可以通過點選第一個按鈕來浏覽一整套的頁面切換效果，您也可以選擇從下拉菜單中選擇一個特定的效果進行預覽。

　　我希望你會喜歡這個并從中得到啟發，創作出一些更加令人興奮的東西！

您可能感興趣的相關文章

<a href="http://www.cnblogs.com/lhb25/p/transitions-for-off-canvas-navigations.html" target="_blank">創意無限！一組網頁邊欄過渡動畫【附源碼下載下傳】</a>

<a href="http://www.cnblogs.com/lhb25/p/page-loading-effects.html" target="_blank">真是好東西！13種非常動感的頁面加載動畫效果</a>

<a href="http://www.cnblogs.com/lhb25/p/9-amazing-checkbox-effect.html" target="_blank">你見過嗎？9款超炫的複選框（Checkbox）效果</a>

<a href="http://www.cnblogs.com/lhb25/p/metronic-responsive-admin-dashboard-template.html" target="_blank">超贊！基于 Bootstrap 的響應式的背景管理模闆</a>

<a href="http://www.cnblogs.com/lhb25/p/special-effects-with-magic-css3-animations.html" target="_blank">Magic CSS3 – 幫助你實作神奇的互動動畫效果</a>