简单的书本翻页效果

最新推荐文章于 2024-10-04 06:11:34 发布

weixin_30301183

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量320

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/melissa/p/4987219.html

版权

一直想做一个翻页的效果，在网上找了很多资料，最好的个人觉得当属turn.js,但是它需要收费，果断放弃，然后又发现这个，感觉不错，仔细分析代码，开始的时候真心有点搞不懂，再三慢慢琢磨后，终于有了一点领悟，，给代码写了一点注释（表达能力欠缺啊，望见谅）。。。。

这个程序的不足有很多，我打算在接下来的几天进行修改一下，不足的点有：

1 兼容性不好，显而易见啊。

2 稳定性不好，多测试一下就发现当鼠标移到书本上的时候，第一面有明显的抖动。。。。

3 翻页的时候不够流畅，而且翻页这一过程速度太快，不能用鼠标来控制翻页这一动作，这一点在看过turn.js做的就会有所感受。

4 阴影部分做得不够细，翻页这一过程中的页面阴影不是很明显。。。

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2   2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3   3 <head>
  4   4     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5   5     <title>纯CSS3实现的书本翻页效果</title>
  6   6     <style type="text/css">
  7   7         body
  8   8         {
  9   9             padding: 0;
 10  10             margin: 0;
 11  11         }
 12  12         #all
 13  13         {
 14  14             width: 680px;
 15  15             margin-left: auto;
 16  16             margin-right: auto;
 17  17         }
 18  18         #page-flip
 19  19         {
 20  20             background-image: url(pagebg.jpg);
 21  21             position: absolute;
 22  22             padding: 40px 40px 40px 340px;   /*卡着了图片在底板上的大致位置*/
 23  23             width: 300px;
 24  24             height: 400px;
 25  25             
 26  26         }
 27  27         #r1               
 28  28         {
 29  29             position: absolute;
 30  30             z-index: 2;
 31  31             -webkit-transform-origin: 1315px 500px;
 32  32             -webkit-transform: translate(-1030px, -500px)rotate(-32deg);
 33  33             -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
 34  34             -webkit-transition-duration: 1s;
 35  35         }
 36  36         #p1                      /*设置了一个一开始就斜起来的大框架*/
 37  37         {
 38  38             width: 1285px;
 39  39             height: 1388px;
 40  40             overflow: hidden;      /*这个非常关键，它决定了page1图片能否跟着#p1的运动而运动*/
 41  41 
 42  42         }
 43  43   
 44  44         #p1 > div                        /* 设置，让书本回归到正向位置，不然会像#p1一样斜着*/
 45  45         {
 46  46             -webkit-transform-origin: 285px 0;
 47  47             -webkit-transform: translate(1030px, 500px) rotate(32deg);
 48  48             -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
 49  49             -webkit-transition-duration: 1s;
 50  50             width: 285px;
 51  51             height: 388px;
 52  52             background-image: url(page1.jpg);
 53  53         }
 54  54         #p1 > div > div                       /* 设置书轴的阴影效果*/
 55  55         {
 56  56             width: 10px;
 57  57             height: 388px;
 58  58             background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0,0,0,0)));
 59  59         }
 60  60  
 61  61         #p2 > div                 /* 设置第三面的图片*/
 62  62         {
 63  63             width: 285px;
 64  64             height: 388px;
 65  65             -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);
 66  66             position: absolute;
 67  67             z-index: 1;
 68  68             background-image: url(page2.jpg);
 69  69         }
 70  70         #r3                            /* 和r1一样的设置*/
 71  71         {
 72  72             -webkit-transform-origin: 1315px 500px;
 73  73             -webkit-transform: translate(-1030px, -500px) rotate(-32deg);
 74  74             -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
 75  75             -webkit-transition-duration: 1s;
 76  76             position: absolute;
 77  77             z-index: 2;
 78  78         }
 79  79 
 80  80         #p3                              /* 和p1一样的，设置了一个一开始就斜起来的大框架*/
 81  81         {
 82  82             width: 1285px;
 83  83             height: 1388px;
 84  84             overflow: hidden;            
 85  85         }
 86  86         #p3 > div                      /* 设置第二面的运动轨迹，第二面的开始位置为斜着，它随着#p3的运动而归正，斜着的时候有一个小角露在外面，这个小角实际上是第二面的，但是看上去像第一面折起来*/
 87  87         {
 88  88             -webkit-transform-origin: 0 0;
 89  89             -webkit-transform: translate(1255px, 500px) rotate(-32deg);
 90  90             -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
 91  91             -webkit-transition-duration: 1s;
 92  92             -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);
 93  93             width: 285px;
 94  94             height: 388px;
 95  95             background-image: url(page3.jpg);
 96  96             overflow: hidden;
 97  97         }
 98  98         #p3 > div > div             /* 设置书本翻页之后的第二面与第三面衔接地方的阴影效果，也就是翻页之后第二面看起来有点供起来的效果*/
 99  99         {
100 100             width: 9px;
101 101             height: 500px;
102 102             float: right;
103 103             background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0,0,0,.20)));
104 104         }
105 105 
106 106         .s                           /* 设置与书本一样大小的透明框架*/
107 107         {
108 108             width: 285px;
109 109             height: 388px;
110 110             position: absolute;
111 111             overflow: hidden;
112 112             z-index: 3;
113 113         }
114 114  
115 115         #s3
116 116         {
117 117             -webkit-transform-origin: 70px 500px;
118 118             -webkit-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
119 119             -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
120 120             -webkit-transition-duration: 1s;
121 121             position: absolute;
122 122             z-index: 1;
123 123         }
124 124         #page-flip:hover #s3
125 125         {
126 126             -webkit-transform-origin: 325px 500px;
127 127             -webkit-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
128 128         }
129 129         #sp3                   /*设置第一面的三角页角的运动的轨迹*/
130 130         {
131 131             width: 25px;
132 132             height: 1000px;
133 133             background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0,0,0,0)));
134 134             -webkit-transition-property: width;
135 135             -webkit-transition-duration: 1s;
136 136             overflow: hidden;
137 137         }
138 138         #page-flip:hover #sp3
139 139         {
140 140             width: 11px;
141 141         }
142 142 
143 143         #s4                   /*设置第一面的三角页角起来的时候那一瞬间的阴影效果*/
144 144         {
145 145             opacity: 1;
146 146             -webkit-transition-duration: 0.5s;
147 147         }
148 148         #page-flip:hover #s4
149 149         {
150 150             opacity: 0;          
151 151         }
152 152 
153 153         #s2
154 154         {
155 155             -webkit-transform-origin: 45px 500px;
156 156             -webkit-transform: translate(240px, -500px) rotate(-32deg);
157 157             -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
158 158             -webkit-transition-duration: 1s;
159 159             position: absolute;
160 160         }
161 161         #sp2
162 162         {
163 163             width: 15px;
164 164             height: 1000px;
165 165             background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .18)), to(rgba(0,0,0,0)));
166 166             overflow: hidden;
167 167         }
168 168         
169 169         #page-flip:hover #s2
170 170         {
171 171             -webkit-transform-origin: 300px 500px;
172 172             -webkit-transform: translate(-15px, -500px) rotate(0deg);
173 173         }
174 174         
175 175         
176 176         #page-flip:hover #r1
177 177         {
178 178             -webkit-transform-origin: 1570px 500px;
179 179             -webkit-transform: translate(-1285px, -500px) rotate(0deg);
180 180         }
181 181         #page-flip:hover #p1 > div
182 182         {
183 183             -webkit-transform-origin: 285px 0;
184 184             -webkit-transform: translate(1285px, 500px) rotate(0deg);
185 185         }
186 186         #page-flip:hover #r3
187 187         {
188 188             -webkit-transform-origin: 1570px 500px;
189 189             -webkit-transform: translate(-1285px, -500px) rotate(0deg);
190 190         }
191 191         #page-flip:hover #p3 > div
192 192         {
193 193             -webkit-transform-origin: 0 0;
194 194             -webkit-transform: translate(1000px, 500px) rotate(0deg);
195 195         }
196 196        
197 206      
198 211      
199 231     </style>
200 232 </head>
201 233 <body>
202 234 
203 235 
204 236 </div>
205 237 
206 238     <div id="all">
207 239         <div id="page-flip">
208 240             <div id="r1"><div id="p1"><div><div></div></div></div></div>
209 241             <div id="p2"><div></div></div>
210 242             <div id="r3"><div id="p3"><div><div></div></div></div></div>
211 243             <div class="s"><div id="s3"><div id="sp3"></div></div></div>
212 244             <div class="s" id="s4"><div id="s2"><div id="sp2"></div></div></div>
213 245             
214 246         </div>
215 247     </div>
216 248 </body>
217 249 </html>