今天我们来分享一些创造性的页面过度效果,我们把各种页面过度动画效果放在一起,以便可以方便的查看这些有趣的和创造性的过度动画效果,当然有些是非常简单的,比如滑动,也有一些使用perspective和3D transform制作出有深度和动态感的效果。
说明:这只是为了展示一些有趣的动画效果和灵感。它并不是一个滑块或者类似滑块的东西。我们只是添加了一些class使其呈现出动态的过度效果,并不是为了导航。
浏览器支持: IE10
我们使用下面的结构来展示不同的“页面”.
<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>
我们为perspective容器使用相对定位,并且给perspective属性赋值为1200px. 下面的这些样式是所有过度动画效果所需要的。
1 .pt-perspective { 2 position: relative; 3 width: 100%; 4 height: 100%; 5 perspective: 1200px; 6 transform-style: preserve-3d; 7 } 8 9 .pt-page { 10 width: 100%; 11 height: 100%; 12 position: absolute; 13 top: 0; 14 left: 0; 15 visibility: hidden; 16 overflow: hidden; 17 backface-visibility: hidden; 18 transform: translate3d(0, 0, 0); 19 } 20 21 .pt-page-current, 22 .no-js .pt-page { 23 visibility: visible; 24 } 25 26 .no-js body { 27 overflow: auto; 28 } 29 30 .pt-page-ontop { 31 z-index: 999; 32 }
.pt-page-ontop类是为了用于一些特定的页面过度效果,我们会使一个页面在另外一个页面之上。
下面列出一个例子:向不同方向缩放页面,同时带有淡入或者淡出效果。
1 /* scale and fade */ 2 3 .pt-page-scaleDown { 4 animation: scaleDown .7s ease both; 5 } 6 7 .pt-page-scaleUp { 8 animation: scaleUp .7s ease both; 9 } 10 11 .pt-page-scaleUpDown { 12 animation: scaleUpDown .5s ease both; 13 } 14 15 .pt-page-scaleDownUp { 16 animation: scaleDownUp .5s ease both; 17 } 18 19 .pt-page-scaleDownCenter { 20 animation: scaleDownCenter .4s ease-in both; 21 } 22 23 .pt-page-scaleUpCenter { 24 animation: scaleUpCenter .4s ease-out both; 25 } 26 27 /************ keyframes ************/ 28 29 /* scale and fade */ 30 31 @keyframes scaleDown { 32 to { opacity: 0; transform: scale(.8); } 33 } 34 35 @keyframes scaleUp { 36 from { opacity: 0; transform: scale(.8); } 37 } 38 39 @keyframes scaleUpDown { 40 from { opacity: 0; transform: scale(1.2); } 41 } 42 43 @keyframes scaleDownUp { 44 to { opacity: 0; transform: scale(1.2); } 45 } 46 47 @keyframes scaleDownCenter { 48 to { opacity: 0; transform: scale(.7); } 49 } 50 51 @keyframes scaleUpCenter { 52 from { opacity: 0; transform: scale(.7); } 53 }
为了说明演示是如何工作的,请看下面的一些js片段,当然你也可以下载源码后找到全部的代码。
1 //... 2 3 case 17: 4 outClass = 'pt-page-scaleDown'; 5 inClass = 'pt-page-moveFromRight pt-page-ontop'; 6 break; 7 case 18: 8 outClass = 'pt-page-scaleDown'; 9 inClass = 'pt-page-moveFromLeft pt-page-ontop'; 10 break; 11 case 19: 12 outClass = 'pt-page-scaleDown'; 13 inClass = 'pt-page-moveFromBottom pt-page-ontop'; 14 break; 15 16 // ...
希望你喜欢这篇文章,从而为你带去灵感做出一些令人兴奋的效果。