应用CSS制做1个较为酷炫的网页页面切换动漫

日期：2021-01-20 类型：科技新闻 

关键词：秀米制作h5，h5如何制作，h5小游戏制作，h5游戏开发，免费的h5制作网站

今日大家想与大伙儿共享1组艺术创意的网页页面切换熊实际效果结合。大家早已在示例中列举了1组动漫，能够被运用到网页页面切换全过程中，造就出很趣味的导航栏实际效果。尽管一些实际效果都十分简易，只是简易的拖动姿势，但此外的1些则是运用了视角（Perspective）和 三d 变换（三d Transforms）来造就1些立体式动感的实际效果。

线上演试

温暖提醒：为确保最好的实际效果，请在 IE10+、Chrome、Firefox 和 Safari 等当代访问器中访问。

　　CSS 动漫依据它们的完成的实际效果分成不一样的组。为展现网页页面过渡实际效果，大家应用下列构造：

CSS Code拷贝內容到剪贴板
  1. <div id="pt-main" class="pt-perspective">   
  2.     <div class="pt-page pt-page⑴">   
  3.         <h1><span>A collection of</span><strong>Page</strong> Transitions</h1>   
  4.     </div>   
  5.     <div class="pt-page pt-page⑵"><!-- ... --></div>   
  6.     <!-- ... -->   
  7. </div>  

　　透視器皿的部位是相对性的，大家提升1200像素透視它。全部动漫实际效果都必须下列的款式：

CSS Code拷贝內容到剪贴板
  1. .pt-perspective {   
  2.     position: relative;   
  3.     width: 100%;   
  4.     height: 100%;   
  5.     perspective: 1200px;   
  6.     transform-style: preserve⑶d;   
  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个网页页面留在另外一个网页页面的顶部。下面是1个编码事例，展现了动漫类和重要帧动漫，在不一样方位上放缩网页页面和和淡入淡出实际效果：

CSS Code拷贝內容到剪贴板
  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. }  

　　针对本演试的目地，大家选用了相应的动漫类运用到当今页和将要切换进来的网页页面，比如：

CSS Code拷贝內容到剪贴板
  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. // ...  

　　查询演试，您能够根据点一下第1个按钮来访问1整套的网页页面切换实际效果，您还可以挑选从往下拉菜单选中择1个特殊的实际效果开展预览。

　　我期待你会喜爱这个并从中获得启迪，创作出1些更为让人激动的物品！

上一篇：深层次分析CSS中margin特性的应用 返回下一篇：没有了