页面过度动画效果大集合



今天我们来分享一些创造性的页面过度效果，我们把各种页面过度动画效果放在一起，以便可以方便的查看这些有趣的和创造性的过度动画效果，当然有些是非常简单的，比如滑动，也有一些使用perspective和3D transform制作出有深度和动态感的效果。页面过度

查看演示  下载源码

说明：这只是为了展示一些有趣的动画效果和灵感。它并不是一个滑块或者类似滑块的东西。我们只是添加了一些class使其呈现出动态的过度效果，并不是为了导航。

浏览器支持：browser_compatability  IE10

我们使用下面的结构来展示不同的“页面”.

  1. <div id="pt-main" class="pt-perspective">
  2.     <div class="pt-page pt-page-1">
  3.         <h1><span>A collection of</span><strong>Page</strong> Transitions</h1>
  4.     </div>
  5.     <div class="pt-page pt-page-2"><!-- ... --></div>
  6.     <!-- ... -->
  7. </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. // ...

希望你喜欢这篇文章，从而为你带去灵感做出一些令人兴奋的效果。

英文原文连接：A COLLECTION OF PAGE TRANSITIONS

 
 
纯CSS3实现手风琴风格菜单
 
 
使用CSS3 Translation为社会化图标添加动画效果


6 评论

  1. 最ACG   •  

    不错哇 [可爱]

    回复
    • 天屹   •     作者

      谢谢支持，天屹有时间会给大家带来更好的文章的。

      回复
  2. 萨芬大   •  

    太棒了

    回复
    • 天屹   •     作者

      谢谢，文章是翻译过来的，最近太忙没有时间翻译国外的一些非常不错的文章了，以后有时间会翻译写更好的文章的。

      回复
  3. waybi   •  

    能详细讲解下js是怎么调用的么 谢谢啊！！！

    回复
    • 天屹   •     作者

      这个我没有仔细深研究他的代码, 英文版的原作者也没有对里面的js详细的介绍.你可以研究研究,咱们可以探讨一下

      回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性： <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>