首页 > 网页制作 > CSS

CSS3实现3D翻书效果

admin CSS 2022-02-06 16:05:17 CSS3   3D   翻书"

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

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

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2.       
  3.     <div class="book">  
  4.         <div class="page">  
  5.             <span>1span>  
  6.             <span>2span>  
  7.         div>  
  8.         <div class="page">  
  9.             <span>3span>  
  10.             <span>4span>  
  11.         div>  
  12.   
  13.         <div class="page">  
  14.             <span>5span>  
  15.             <span>6span>  
  16.         div>  
  17.   
  18.         <div class="page">  
  19.             <span>7span>  
  20.             <span>8span>  
  21.         div>  
  22.   
  23.         <div class="page">  
  24.             <span>9span>  
  25.             <span>10span>  
  26.         div>  
  27.   
  28.         <div class="page">  
  29.             <span>11span>  
  30.             <span>12span>  
  31.         div>  
  32.   
  33.         <div class="page">  
  34.             <span>13span>  
  35.             <span>14span>  
  36.         div>  
  37.   
  38.         <div class="page">  
  39.             <span>15span>  
  40.             <span>16span>  
  41.         div>  
  42.   
  43.         <div class="page">  
  44.             <span>17span>  
  45.             <span>18span>  
  46.         div>  
  47.   
  48.         <div class="page">  
  49.             <span>19span>  
  50.             <span>20span>  
  51.         div>  
  52.     div>  
  53.   
  54.       
  55.     <input type="button" value="上一页" id="before"/>  
  56.     <input type="button" value="下一页" id="after"/>  
  57. body>    

CSS部分:(通过改变transform中rotatey的值,来实现书页的翻转效果)

CSS Code复制内容到剪贴板
  1.   

JS部分(JS部分主要实现点击上/下一页时,为相应的div添加animation属性)

JavaScript Code复制内容到剪贴板
  1.   

关于最后JS部分,主要作用在于,当点击上/下一页时,为相应的div添加animation属性,具体animation的详解,还是需要查看API。
 
介于兼容性的问题,这里比较好的解决办法是添加class,而不是去添加animation,为适应更多浏览器,需要添加前缀-webkit-、-moz-·······,所以在一个类中写好这些东西,直接添加类就可以了,或者写一个函数,封装好,能直接输出需要的字符串就好。

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/web/CSS/77802.html

留言与评论(共有 0 条评论)
   
验证码:

潘少俊衡

| 桂ICP备2023010378号-4

Powered By EmpireCMS

爱享小站

中德益农

谷姐神农

环亚肥料

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢潘少俊衡友情技术支持