秋天是秋高气爽、秋风瑟瑟的季节。农民伯伯在辛勤地收谷，秋天的大树落下了好多树叶像翩翩起舞的蝴蝶。夕阳的金辉把绿色的林海染成金黄一片。
今天我们想与大家分享一组创意的页面切换熊效果集合。我们已经在示例中罗列了一组动画，可以被应用到页面切换过程中，创造出很有趣的导航效果。虽然有些效果都非常简单，只是简单的滑动动作，但另外的一些则是利用了视角（Perspective）和 3D 转换（3D Transforms）来创造一些立体动感的效果。
在线演示
温馨提示：为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。
CSS 动画根据它们的实现的效果分为不同的组。为展示页面过渡效果，我们使用以下结构：
CSS Code复制内容到剪贴板
- <divid="pt-main"class="pt-perspective">
- <divclass="pt-pagept-page-1">
- <h1><span>Acollectionof</span><strong>Page</strong>Transitions</h1>
- </div>
- <divclass="pt-pagept-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-jsbody{
- overflow:auto;
- }
- .pt-page-ontop{
- z-index:999;
- }
上面的 .pt-page-ontop 样式用于某些页面过渡效果，即我们需要让一个页面留在另一个页面的顶部。下面是一个代码例子，展示了动画类和关键帧动画，在不同方向上缩放网页和以及淡入淡出效果：
CSS Code复制内容到剪贴板
- /*scaleandfade*/
- .pt-page-scaleDown{
- animation:scaleDown.7seaseboth;
- }
- .pt-page-scaleUp{
- animation:scaleUp.7seaseboth;
- }
- .pt-page-scaleUpDown{
- animation:scaleUpDown.5seaseboth;
- }
- .pt-page-scaleDownUp{
- animation:scaleDownUp.5seaseboth;
- }
- .pt-page-scaleDownCenter{
- animation:scaleDownCenter.4sease-inboth;
- }
- .pt-page-scaleUpCenter{
- animation:scaleUpCenter.4sease-outboth;
- }
- /************keyframes************/
- /*scaleandfade*/
- @keyframesscaleDown{
- to{opacity:0;transform:scale(.8);}
- }
- @keyframesscaleUp{
- from{opacity:0;transform:scale(.8);}
- }
- @keyframesscaleUpDown{
- from{opacity:0;transform:scale(1.2);}
- }
- @keyframesscaleDownUp{
- to{opacity:0;transform:scale(1.2);}
- }
- @keyframesscaleDownCenter{
- to{opacity:0;transform:scale(.7);}
- }
- @keyframesscaleUpCenter{
- from{opacity:0;transform:scale(.7);}
- }
对于本演示的目的，我们采用了相应的动画类应用到当前页以及即将切换进来的页面，例如：
CSS Code复制内容到剪贴板
- //...
- case17:
- outClass='pt-page-scaleDown';
- inClass='pt-page-moveFromRightpt-page-ontop';
- break;
- case18:
- outClass='pt-page-scaleDown';
- inClass='pt-page-moveFromLeftpt-page-ontop';
- break;
- case19:
- outClass='pt-page-scaleDown';
- inClass='pt-page-moveFromBottompt-page-ontop';
- break;
- //...
查看演示，您可以通过点击第一个按钮来浏览一整套的页面切换效果，您也可以选择从下拉菜单中选择一个特定的效果进行预览。
我希望你会喜欢这个并从中得到启发，创作出一些更加令人兴奋的东西！
本文如何使用CSS制作一个比较炫酷的页面切换动画到此结束。最大的失败是放弃，最大的敌人是自己，最大的对手是时间。小编再次感谢大家对我们的支持！
