CSS3完成三d翻书实际效果

日期:2021-03-03 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

先上实际效果图:(款式有点丑,能够忽视1下下,实际效果出来了就好,后期加到别的新项目中便捷变更0.0)

相近翻书实际效果,本来的意思是应用JS来操纵的,点一下1次以后应用setInterval去操纵书册越过去的动漫,当书册旋转180°以后,消除掉setInterval,但当我持续点一下,那以前沒有旋转180°的书册将没法再次进行以前的姿势,能够用消除setInterval的方法,但总觉得动漫实际效果不太好,自然也有别的处理方法,但忽然想起,CSS3为大家出示了animation,大家为何不去应用应用呢,要是为再加animation动漫便可以立即防止这个难题,animation动漫默认设置是每次都实行完动漫,因此,当出現连点的情况下,就会像图中看到的那样,每页都当然换页,下面贴上编码,及完成流程:
注:本案例JS一部分均以原生态JS撰写,不当用原生态JS的,能用jQuery等对3方架构改变
html一部分:(这一部分真心实意·····,算了吧,丑就丑点吧~.~)

XML/HTML Code拷贝內容到剪贴板
  1. <body>  
  2.     <!-- 所展现的书的內容 -->  
  3.     <div class="book">  
  4.         <div class="page">  
  5.             <span>1</span>  
  6.             <span>2</span>  
  7.         </div>  
  8.         <div class="page">  
  9.             <span>3</span>  
  10.             <span>4</span>  
  11.         </div>  
  12.   
  13.         <div class="page">  
  14.             <span>5</span>  
  15.             <span>6</span>  
  16.         </div>  
  17.   
  18.         <div class="page">  
  19.             <span>7</span>  
  20.             <span>8</span>  
  21.         </div>  
  22.   
  23.         <div class="page">  
  24.             <span>9</span>  
  25.             <span>10</span>  
  26.         </div>  
  27.   
  28.         <div class="page">  
  29.             <span>11</span>  
  30.             <span>12</span>  
  31.         </div>  
  32.   
  33.         <div class="page">  
  34.             <span>13</span>  
  35.             <span>14</span>  
  36.         </div>  
  37.   
  38.         <div class="page">  
  39.             <span>15</span>  
  40.             <span>16</span>  
  41.         </div>  
  42.   
  43.         <div class="page">  
  44.             <span>17</span>  
  45.             <span>18</span>  
  46.         </div>  
  47.   
  48.         <div class="page">  
  49.             <span>19</span>  
  50.             <span>20</span>  
  51.         </div>  
  52.     </div>  
  53.   
  54.     <!-- 用来操纵上1页和下1页实际操作 -->  
  55.     <input type="button" value="上1页" id="before"/>  
  56.     <input type="button" value="下1页" id="after"/>  
  57. </body>    

CSS一部分:(根据更改transform中rotatey的值,来完成书册的旋转实际效果)

CSS Code拷贝內容到剪贴板
  1. <style>   
  2.         .book{   
  3.             width460px;   
  4.             height300px;   
  5.             positionrelative;   
  6.             margin150px 400px;   
  7.             -webkit-transform-style: preserve⑶d;   
  8.             -moz-transform-style: preserve⑶d;   
  9.             -ms-transform-style: preserve⑶d;   
  10.             transform-style: preserve⑶d;   
  11.             transform: rotatex(30deg);   
  12.         }   
  13.         .page{   
  14.             width230px;   
  15.             height300px;   
  16.   
  17.             border1px solid #666;   
  18.             positionabsolute;   
  19.             rightright: 0;   
  20.             transform-origin: left;   
  21.             transform-style: preserve⑶d;   
  22.             backface-visibility:hidden;   
  23.             font-size60px;   
  24.             text-aligncenter;   
  25.             line-height300px;   
  26.         }   
  27.         .page span{   
  28.             displayblock;   
  29.             width: 100%;   
  30.             positionabsolute;   
  31.             background-color#00FFFF;   
  32.         }   
  33.         .page span:nth-child(2){   
  34.             transform: rotatey(⑴80deg);   
  35.             backface-visibility:hidden;   
  36.         }   
  37.   
  38.   
  39.         /*下列两个动漫能够只应用第1个,animation中有reverse,能够反方向实行动漫,  
  40.             应用时必须在JS中点一下上1页时加上改特性值*/  
  41.         /*翻书下1页的动漫*/  
  42.         @keyframes page {   
  43.             0%{   
  44.                 transform: rotatey(0deg);   
  45.             }   
  46.             100%{   
  47.                 transform: rotatey(⑴80deg);   
  48.                 z-index: 10;   
  49.             }   
  50.         }   
  51.         /*翻书上1页的动漫*/  
  52.         @keyframes page1 {   
  53.             0%{   
  54.                 transform: rotatey(⑴80deg);   
  55.                 z-index: 10;   
  56.             }   
  57.             100%{   
  58.                 transform: rotatey(0deg);   
  59.             }   
  60.         }   
  61.            
  62.     </style>   

JS一部分(JS一部分关键完成点一下上/下1页时,为相应的div加上animation特性)

JavaScript Code拷贝內容到剪贴板
  1. <script>   
  2.     var before = document.querySelector("#before");   
  3.     var after = document.querySelector("#after");   
  4.     var book = document.querySelector(".book");   
  5.     var page = document.getElementsByClassName("page"); 7     rotate();   
  6.   
  7.     function rotate(){   
  8.         var middle = 0;12         for(var z=0;z<book.children.length;z++){   
  9.             page[z].style.zIndex = book.children.length-z;   
  10.         }   
  11.         after.onclick = function(){   
  12.             if(middle != book.children.length){   
  13.                 page[middle].style.animation = "page 1.5s linear 1 forwards";   
  14.                 middle++;   
  15.             }else{   
  16.                 middle = book.children.length;   
  17.             }   
  18.         };   
  19.         before.onclick = function(){   
  20.             if(middle != 0){   
  21.                 page[middle⑴].style.animation = "page1 1.5s linear 1 forwards";   
  22.                 middle--;   
  23.         }else{   
  24.             middle = 0;   
  25.             }   
  26.         }   
  27.     }   
  28. </script>   

有关最终JS一部分,关键功效在于,当点一下上/下1页时,为相应的div加上animation特性,实际animation的详解,還是必须查询API。
 
介于适配性的难题,这里较为好的处理方法是加上class,而并不是去加上animation,为融入更多访问器,必须加上前缀-webkit-、-moz-·······,因此在1个类中写好这些物品,立即加上类便可以了,或写1个涵数,封裝好,能立即輸出必须的标识符串就好。