你的位置:首页 > 网页设计

[网页设计]基于CSS3新属性Animation及transform实现类似翻书效果


注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写

先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0)

类似翻书效果,原本的意思是使用JS来控制的,点击一次之后使用setInterval去控制书页翻过去的动画,当书页翻转180°之后,清除掉setInterval,但当我连续点击,那之前没有翻转180°的书页将无法继续完成之前的动作,可以用清除setInterval的方式,但总感觉动画效果不好,当然还有其他解决办法,但突然想到,CSS3为我们提供了animation,我们为什么不去使用使用呢,只要为加上animation动画就可以直接避免这个问题,animation动画默认是每次都执行完动画,所以,当出现连点的时候,就会像图中看到的那样,每一页都自然翻页,下面贴上代码,及实现步骤:

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

<body>  <!-- 所展示的书的内容 -->  <div >    <div >      <span>1</span>      <span>2</span>    </div>    <div >      <span>3</span>      <span>4</span>    </div>    <div >      <span>5</span>      <span>6</span>    </div>    <div >      <span>7</span>      <span>8</span>    </div>    <div >      <span>9</span>      <span>10</span>    </div>    <div >      <span>11</span>      <span>12</span>    </div>    <div >      <span>13</span>      <span>14</span>    </div>    <div >      <span>15</span>      <span>16</span>    </div>    <div >      <span>17</span>      <span>18</span>    </div>    <div >      <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-·······,所以在一个类中写好这些东西,直接添加类就可以了,或者写一个函数,封装好,能直接输出需要的字符串就好。