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

時間 2019-11-13

標籤基於 css3 css 屬性 animation transform 實現相似翻書效果欄目 CSS 简体版

原文原文鏈接

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

先上效果圖：（樣式有點醜，能夠忽略一下下，效果出來了就好，後期加到其餘項目中方便更改0.0）web

相似翻書效果，本來的意思是使用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。spa

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。