一組網頁邊欄過渡動畫,創意無限！【附源碼下載下傳】

今天我們想與大家分享另一套過渡效果。這一次，我們将探讨如何實作側邊欄的過渡動畫，就像我們已經在多級推出菜單中使用的。我們的想法是，以細微的

過渡動畫顯示一些隐藏的側邊欄，其餘的内容也是。通常側邊欄滑入，把其他内容推到一邊。這個可過程中可以加入很多微妙而奇特的效果，而今天這篇文章能夠給

你一些啟示。

　　溫馨提示：為保證最佳的效果，請在 ie10+、chrome、firefox 和 safari 等現代浏覽器中浏覽。

　　因為我們希望能夠在一個頁面上展現所有的效果，是以我們示例的結果都是非常具體的。但在一般情況下，我們需要在 push

容器内部或者外部的側邊欄元素，這取決于我們是要把側邊欄顯示在 push 容器的上面還是下面。是以，有兩種 html 結構，第一種實作的代碼如下：

或者是下面這種結構：

效果七的 css 代碼如下。我們把透視值添加到主容器，然後我們以 3d 效果旋轉 push 容器和菜單 ：

請注意，我們在這裡使用 visibility 屬性，因為在我們的示範中有多個側邊欄。如果你隻是有一個側邊欄，你将不必把 visibility

屬性從hidden 設定為 visible。

　　另外有些浏覽器不支援僞元素（我們用來實作遮罩）的過渡（transitions），是以你在這些浏覽器可能會看到一個快速閃爍（例如一些手機浏覽

器）。還有就是，ie10 不支援 transform-style: preserve-3d 效果，會破壞嵌套的 3d

轉換元素。是以有部分例子你将不能夠正确地看到那些效果。

　　我們希望這個集合給你一些靈感，創造出一些不錯的效果。希望你會喜歡！

來源：