基于CSS3新属性Animation及transform实现类似翻书效果

Posted 笛声如诉人影茫

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于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-·······,所以在一个类中写好这些东西,直接添加类就可以了,或者写一个函数,封装好,能直接输出需要的字符串就好。

以上是关于基于CSS3新属性Animation及transform实现类似翻书效果的主要内容,如果未能解决你的问题,请参考以下文章

搞清animation/transtion/transform/translate

CSS3 animation-fill-mode 属性

css3中animation属性animation-timing-function知识点以及其属性值steps()

动画属性

怎麼停止css3属性animation,求助

animation属性