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

类似翻书效果,原本的意思是使用JS来控制的,点击一次之后使用setInterval去控制书页翻过去的动画,当书页翻转180°之后,清除掉setInterval,但当我连续点击,那之前没有翻转180°的书页将无法继续完成之前的动作,可以用清除setInterval的方式,但总感觉动画效果不好,当然还有其他解决办法,但突然想到,CSS3为我们提供了animation,我们为什么不去使用使用呢,只要为加上animation动画就可以直接避免这个问题,animation动画默认是每次都执行完动画,所以,当出现连点的时候,就会像图中看到的那样,每一页都自然翻页,下面贴上代码,及实现步骤:
注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写
html部分:(这部分真心·····,算了,丑就丑点吧~.~)
-
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
CSS部分:(通过改变transform中rotatey的值,来实现书页的翻转效果)
CSS Code复制内容到剪贴板- .book{
- width: 460px;
- height: 300px;
- position: relative;
- margin: 150px 400px;
- -webkit-transform-style: preserve-3d;
- -moz-transform-style: preserve-3d;
- -ms-transform-style: preserve-3d;
- transform-style: preserve-3d;
- transform: rotatex(30deg);
- }
- .page{
- width: 230px;
- height: 300px;
- border: 1px solid #666;
- position: absolute;
- rightright: 0;
- transform-origin: left;
- transform-style: preserve-3d;
- backface-visibility:hidden;
- font-size: 60px;
- text-align: center;
- line-height: 300px;
- }
- .page span{
- display: block;
- width: 100%;
- position: absolute;
- background-color: #00FFFF;
- }
- .page span:nth-child(2){
- transform: rotatey(-180deg);
- backface-visibility:hidden;
- }
- @keyframes page {
- 0%{
- transform: rotatey(0deg);
- }
- 100%{
- transform: rotatey(-180deg);
- z-index: 10;
- }
- }
- @keyframes page1 {
- 0%{
- transform: rotatey(-180deg);
- z-index: 10;
- }
- 100%{
- transform: rotatey(0deg);
- }
- }
JS部分(JS部分主要实现点击上/下一页时,为相应的div添加animation属性)
Javascript Code复制内容到剪贴板关于最后JS部分,主要作用在于,当点击上/下一页时,为相应的div添加animation属性,具体animation的详解,还是需要查看API。
介于兼容性的问题,这里比较好的解决办法是添加class,而不是去添加animation,为适应更多浏览器,需要添加前缀-webkit-、-moz-·······,所以在一个类中写好这些东西,直接添加类就可以了,或者写一个函数,封装好,能直接输出需要的字符串就好。


