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

　　今天我們想與大家分享另一套過渡效果。這一次，我們將探討如何實現側邊欄的過渡動畫，就像我們已經在多級推出菜單中使用的。我們的想法是，以細微的過渡動畫顯示一些隱藏的側邊欄，其余的內容也是。通常側邊欄滑入，把其他內容推到一邊。這個可過程中可以加入很多微妙而奇特的效果，而今天這篇文章能夠給你一些啟示。

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

 

 

立即下載      在線演示

 

　　因為我們希望能夠在一個頁面上展現所有的效果，因此我們示例的結果都是非常具體的。但在一般情況下，我們需要在 Push 容器內部或者外部的側邊欄元素，這取決於我們是要把側邊欄顯示在 Push 容器的上面還是下面。所以，有兩種 HTML 結構，第一種實現的代碼如下：

<div id="st-container" class="st-container">
    <!-- content push wrapper -->
    <div class="st-pusher">
        <nav class="st-menu st-effect-1" id="menu-1">
            <!-- sidebar content -->
        </nav>
        <div class="st-content"><!-- this is the wrapper for the content -->
            <div class="st-content-inner"><!-- extra div for emulating position:fixed of the menu -->
                <!-- the content -->
            </div><!-- /st-content-inner -->
        </div><!-- /st-content -->
    </div><!-- /st-pusher -->
</div><!-- /st-container -->

　　或者是下面這種結構：

<div id="st-container" class="st-container">
    <nav class="st-menu st-effect-1" id="menu-1">
        <!-- sidebar content -->
    </nav>
    <!-- content push wrapper -->
    <div class="st-pusher">
        <div class="st-content"><!-- this is the wrapper for the content -->
            <div class="st-content-inner"><!-- extra div for emulating position:fixed of the menu -->
                <!-- the content -->
            </div><!-- /st-content-inner -->
        </div><!-- /st-content -->
    </div><!-- /st-pusher -->
</div><!-- /st-container -->

　　效果七的 CSS 代碼如下。我們把透視值添加到主容器，然后我們以 3D 效果旋轉 Push 容器和菜單 ：

.st-effect-7.st-container {
    perspective: 1500px;
    perspective-origin: 0% 50%;
}
 
.st-effect-7 .st-pusher {
    transform-style: preserve-3d;
}
 
.st-effect-7.st-menu-open .st-pusher {
    transform: translate3d(300px, 0, 0);
}
 
.st-effect-7.st-menu {
    transform: translate3d(-100%, 0, 0) rotateY(-90deg);
    transform-origin: 100% 50%;
    transform-style: preserve-3d;
}
 
.st-effect-7.st-menu-open .st-effect-7.st-menu {
    visibility: visible;
    transform: translate3d(-100%, 0, 0) rotateY(0deg);
}

　　請注意，我們在這里使用 visibility 屬性，因為在我們的演示中有多個側邊欄。如果你只是有一個側邊欄，你將不必把 visibility 屬性從hidden 設置為 visible。

　　另外有些瀏覽器不支持偽元素（我們用來實現遮罩）的過渡（transitions），所以你在這些瀏覽器可能會看到一個快速閃爍（例如一些手機瀏覽器）。還有就是，IE10 不支持 transform-style: preserve-3d 效果，會破壞嵌套的 3D 轉換元素。所以有部分例子你將不能夠正確地看到那些效果。

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

 

立即下載      在線演示

 

您可能感興趣的相關文章

• 分享9款超炫的復選框（Checkbox）效果
• 真是好東西！一組動感的頁面加載動畫效果
• Codrops 教程：基於 CSS3 的全屏網頁過渡特效
• Codrops 教程：基於 CSS3 的精美模態窗口效果
• Zepto.js – 為現代瀏覽器而生的輕量JavaScript庫

 

本文鏈接：創意無限！很酷的網頁邊欄過渡動畫 via Codrops

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源

本文來自【夢想天空（http://www.cnblogs.com/lhb25/）】