使用CSS制作一个比较炫酷的页面切换动画

今天我们想与大家分享一组创意的页面切换熊效果集合。我们已经在示例中罗列了一组动画，可以被应用到页面切换过程中，创造出很有趣的导航效果。虽然有些效果都非常简单，只是简单的滑动动作，但另外的一些则是利用了视角（Perspective）和 3D 转换（3D Transforms）来创造一些立体动感的效果。

在线演示

温馨提示：为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。

　　CSS 动画根据它们的实现的效果分为不同的组。为展示页面过渡效果，我们使用以下结构：

CSS Code复制内容到剪贴板

<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复制内容到剪贴板

.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;