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

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

基于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>
2var before = document.querySelector("#before");
3var after = document.querySelector("#after");
4var book = document.querySelector(".book");
5var page = document.getElementsByClassName("page"); 7 rotate();
8
9function rotate(){
10var middle = 0;12for(var z=0;z<book.children.length;z++){
13 page[z].style.zIndex = book.children.length-z;
14 }
15 after.onclick = function(){
16if(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(){
24if(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-·······，所以在⼀个类中写好这些东西，直接添加类就可以了，或者写⼀个函数，封装好，能直接输出需要的字符串就好。