HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 应用推荐 HTML5应用 查看内容

超炫的页面切换动画效果【附源码下载】

2014-5-19 14:22| 发布者: html5cn| 查看: 51223| 评论: 3|原作者: html5cn|来自: 梦想天空

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



立即下载      在线演示

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


  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>
复制代码

  **容器的位置是相对的,我们增加1200像素**它。所有动画效果都需要以下的样式:


  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. }
复制代码

 对于本演示的目的,我们采用了相应的动画类应用到当前页以及即将切换进来的页面,例如:


  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. // ...
复制代码


       查看演示,您可以通过点击第一个按钮来浏览一整套的页面切换效果,您也可以选择从下拉菜单中选择一个特定的效果进行预览。


  我希望你会喜欢这个并从中得到启发,创作出一些更加令人兴奋的东西!




更多
13

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (13 人)

相关阅读

发表评论

最新评论

引用 dream.. 2014-6-19 14:57
不是很花哨,但是很让人有一种耳目一新的感觉
引用 我天天感冒 2015-1-8 15:24
;两个独立的页面,互相跳转的时候能用这个动画吗,还是只限于在同一个页面里的不同容器的显示隐藏时用的动画,能否解答一下。想用在手机网页里,跳转的时候模拟APP页面切换能有动画,但是内容是独立的两个页面

查看全部评论(3)

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-4-28 06:44

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部