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

在線演示

溫馨提示：為保證最佳的效果，請?jiān)?IE10+、Chrome、Firefox 和 Safari 等現(xiàn)代瀏覽器中瀏覽。

　　CSS 動畫根據(jù)它們的實(shí)現(xiàn)的效果分為不同的組。為展示頁面過渡效果，我們使用以下結(jié)構(gòu)：

CSS Code復(fù)制內(nèi)容到剪貼板

<div id="pt-main" class="pt-perspective">   
    <div class="pt-page pt-page-1">   
        <h1><span>A collection of</span><strong>Page</strong> Transitions</h1>   
    </div>   
    <div class="pt-page pt-page-2"><!– … –></div>   
    <!– … –>   
</div>  

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

CSS Code復(fù)制內(nèi)容到剪貼板

.pt-perspective {   
    position: relative;   
    width: 100%;   
    height: 100%;   
    perspective: 1200px;   
    transform-style: preserve-3d;   
}   
    
.pt-page {   
    width: 100%;   
    height: 100%;   
    position: absolute;   
    top: 0;   
    left: 0;   
    visibility: hidden;   
    overflow: hidden;   
    backface-visibility: hidden;   
    transform: translate3d(0, 0, 0);   
}   
    
.pt-page-current,   
.no-js .pt-page {   
    visibility: visible;   
}   
    
.no-js body {   
    overflow: auto;   
}   
    
.pt-page-ontop {   
    z-index: 999;