基於CSS3新屬性Animation及transform實現類似翻書效果


注:本實例JS部分均以原生JS編寫,不善用原生JS的,可用jQuery等對三方框架改寫

先上效果圖:(樣式有點丑,可以忽略一下下,效果出來了就好,后期加到其他項目中方便更改0.0)

類似翻書效果,原本的意思是使用JS來控制的,點擊一次之后使用setInterval去控制書頁翻過去的動畫,當書頁翻轉180°之后,清除掉setInterval,但當我連續點擊,那之前沒有翻轉180°的書頁將無法繼續完成之前的動作,可以用清除setInterval的方式,但總感覺動畫效果不好,當然還有其他解決辦法,但突然想到,CSS3為我們提供了animation,我們為什么不去使用使用呢,只要為加上animation動畫就可以直接避免這個問題,animation動畫默認是每次都執行完動畫,所以,當出現連點的時候,就會像圖中看到的那樣,每一頁都自然翻頁,下面貼上代碼,及實現步驟:

html部分:(這部分真心·····,算了,丑就丑點吧~.~)

<body>
    <!-- 所展示的書的內容 -->
    <div class="book">
        <div class="page">
            <span>1</span>
            <span>2</span>
        </div>
        <div class="page">
            <span>3</span>
            <span>4</span>
        </div>
        <div class="page">
            <span>5</span>
            <span>6</span>
        </div>
        <div class="page">
            <span>7</span>
            <span>8</span>
        </div>
        <div class="page">
            <span>9</span>
            <span>10</span>
        </div>
        <div class="page">
            <span>11</span>
            <span>12</span>
        </div>
        <div class="page">
            <span>13</span>
            <span>14</span>
        </div>
        <div class="page">
            <span>15</span>
            <span>16</span>
        </div>
        <div class="page">
            <span>17</span>
            <span>18</span>
        </div>
        <div class="page">
            <span>19</span>
            <span>20</span>
        </div>
    </div>
    <!-- 用來控制上一頁和下一頁操作 -->
    <input type="button" value="上一頁" id="before"/>
    <input type="button" value="下一頁" id="after"/>
</body>

CSS部分:(通過改變transform中rotatey的值,來實現書頁的翻轉效果)

 1 <style>
 2         .book{
 3             width: 460px;
 4             height: 300px;
 5             position: relative;
 6             margin: 150px 400px;
 7             -webkit-transform-style: preserve-3d;
 8             -moz-transform-style: preserve-3d;
 9             -ms-transform-style: preserve-3d;
10             transform-style: preserve-3d;
11             transform: rotatex(30deg);
12         }
13         .page{
14             width: 230px;
15             height: 300px;
16 
17             border: 1px solid #666;
18             position: absolute;
19             right: 0;
20             transform-origin: left;
21             transform-style: preserve-3d;
22             backface-visibility:hidden;
23             font-size: 60px;
24             text-align: center;
25             line-height: 300px;
26         }
27         .page span{
28             display: block;
29             width: 100%;
30             position: absolute;
31             background-color: #00FFFF;
32         }
33         .page span:nth-child(2){
34             transform: rotatey(-180deg);
35             backface-visibility:hidden;
36         }
37 
38 
39         /*以下兩個動畫可以只使用第一個,animation中有reverse,可以反向執行動畫,
40             使用時需要在JS中點擊上一頁時添加改屬性值*/
41         /*翻書下一頁的動畫*/
42         @keyframes page {
43             0%{
44                 transform: rotatey(0deg);
45             }
46             100%{
47                 transform: rotatey(-180deg);
48                 z-index: 10;
49             }
50         }
51         /*翻書上一頁的動畫*/
52         @keyframes page1 {
53             0%{
54                 transform: rotatey(-180deg);
55                 z-index: 10;
56             }
57             100%{
58                 transform: rotatey(0deg);
59             }
60         }
61         
62     </style>

JS部分(JS部分主要實現點擊上/下一頁時,為相應的div添加animation屬性)

 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();
 8 
 9     function rotate(){
10         var middle = 0;12         for(var z=0;z<book.children.length;z++){
13             page[z].style.zIndex = book.children.length-z;
14         }
15         after.onclick = function(){
16             if(middle != book.children.length){
17                 page[middle].style.animation = "page 1.5s linear 1 forwards";
18                 middle++;
19             }else{
20                 middle = book.children.length;
21             }
22         };
23         before.onclick = function(){
24             if(middle != 0){
25                 page[middle-1].style.animation = "page1 1.5s linear 1 forwards";
26                 middle--;
27         }else{
28             middle = 0;
29             }
30         }
31     }
32 </script>

關於最后JS部分,主要作用在於,當點擊上/下一頁時,為相應的div添加animation屬性,具體animation的詳解,還是需要查看API。

介於兼容性的問題,這里比較好的解決辦法是添加class,而不是去添加animation,為適應更多瀏覽器,需要添加前綴-webkit-、-moz-·······,所以在一個類中寫好這些東西,直接添加類就可以了,或者寫一個函數,封裝好,能直接輸出需要的字符串就好。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM