经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS3 » 查看文章
CSS3 制作的书本翻页特效_css3_CSS
来源：jb51　　时间：2021/4/12 19:00:59　　对本文有异议

实现效果：

实现代码：

html

  1. <!-- Please heart it if you like! -->
  2. <div id='book'>
  3.   <div id='top'></div>
  4.   <div id='front'></div>
  5.   <div id='right'></div>
  6.   <div id='bottom'></div>
  7.   <div id='shadow'></div>
  8.   <div id='bookmark'>
  9.     <div>
  10.       <div>
  11.         <div>
  12.           <div></div>
  13.         </div>
  14.       </div>
  15.     </div>
  16.   </div>
  17.   <div id='bookmark-shadow'></div>
  18. </div>
  19. <div id='flip'>
  20.   <div id='front'>
  21.     <div>
  22.       <div>
  23.         <div>
  24.           <div>
  25.             <div>
  26.               <div>
  27.                 <div>
  28.                   <div>
  29.                     <div>
  30.                       <div></div>
  31.                     </div>
  32.                   </div>
  33.                 </div>
  34.               </div>
  35.             </div>
  36.           </div>
  37.         </div>
  38.       </div>
  39.     </div>
  40.   </div>
  41.   <div id='back'>
  42.     <div>
  43.       <div>
  44.         <div>
  45.           <div>
  46.             <div>
  47.               <div>
  48.                 <div>
  49.                   <div>
  50.                     <div>
  51.                       <div></div>
  52.                     </div>
  53.                   </div>
  54.                 </div>
  55.               </div>
  56.             </div>
  57.           </div>
  58.         </div>
  59.       </div>
  60.     </div>
  61.   </div>
  62. </div>
  63. <h4>CSS 3D Bending Effect - Page Flip</h4>

CSS3

  1. /* remember to use - transform-style: preserve-3d; */
  2. html,body {
  3.   height:100%;
  4.   overflow: hidden;
  5. }
  6. body {
  7.   background: radial-gradient(#E4CEA6, #9C8763);
  8.   perspective: 900px;
  9.   margin: 0;
  10. }
  11. #flip {
  12.   animation: wrapper 6s ease-in-out infinite;
  13.   height: 350px;
  14.   width: 253px; 
  15.   position: absolute;
  16.   left: 50%;
  17.   top: 30%;
  18.   transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(0deg)!important;
  19.   transform-style: preserve-3d;
  20.   transform-origin: 0 0 0;
  21. }
  22. @keyframes wrapper {
  23.   50% {
  24.     transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
  25.   }
  26. }
  27. #flip div {
  28.   height: 350px;
  29.   width: 24px;
  30.   position: absolute;
  31.   left: calc(100% - 1px);
  32.   transform-origin: 0 100%;
  33.   transform-style: preserve-3d;
  34.   background-size: 253px 350px;
  35. }
  36. #flip #front, 
  37. #flip #front div {
  38.   background-image: url(http://blogs.slj.com/afuse8production/files/2012/06/Hobbit1.jpg);
  39.   box-shadow: inset rgba(255,255,255,0.3) 0px -1px 0 0,#35582C 0px 1px 0px 0px;
  40. }
  41. #flip #front > div > div > div > div > div > div > div > div > div > div { 
  42.   box-shadow: inset rgba(255,255,255,0.3) -1px -1px 0 0, #35582C 1px 1px 0px 0px;
  43. }
  44. #flip #back { transform: rotateY(.4deg); transform-origin: -100% 0; } /* avoid pages overlap */
  45. #flip #back,
  46. #flip #back div {
  47.   background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/164210/map1_.jpg); 
  48. }
  49.  
  50. #flip > div {  left: 0;  background-position-x: 0; }
  51. #flip div > div { background-position-x: -23px; animation: page 6s ease-in-out infinite; }
  52. #flip div > div > div { background-position-x : -46px; } 
  53. #flip div > div > div > div { background-position-x : -69px; }
  54. #flip div > div > div > div > div { background-position-x : -92px; }
  55. #flip div > div > div > div > div > div { background-position-x : -115px; }
  56. #flip div > div > div > div > div > div > div { background-position-x : -138px; }
  57. #flip div > div > div > div > div > div > div > div  { background-position-x : -161px; }
  58. #flip div > div > div > div > div > div > div > div > div { background-position-x : -184px; }
  59. #flip div > div > div > div > div > div > div > div > div > div { background-position-x : -207px; }
  60. #flip div > div > div > div > div > div > div > div > div > div > div { background-position-x : -229px; }
  61. /* the more pieces you have, the smoother the bend is */
  62.  
  63. @keyframes page {
  64.   15% { transform: rotateY(-10deg); }
  65.   50% { transform: rotateY(-2deg); }
  66.   65% { transform: rotateY(10deg); }
  67.   100% { transform: rotateY(0deg); }
  68. }
  69.  
  70. #book {
  71.   width: 248px;
  72.   height: 350px;
  73.   position: absolute;
  74.   left:50%;
  75.   top: 30%;
  76.   transform: translate3d(0px,0px,-10px) rotateX(60deg) rotateZ(29deg);
  77.   transform-style: preserve-3d;
  78.   -webkit-transform-origin: 0 0 0;
  79. }
  80. @keyframes book {
  81.   25% {
  82.     box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px;
  83.   }
  84.   50% {
  85.     box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px;
  86.   }
  87.   100% {
  88.     box-shadow: inset rgba(0,0,0,.2) 510px 0 50px -140px;
  89.   }
  90. }
  91. #book #top {
  92.   animation: book 6s ease-in-out infinite;
  93.   background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/164210/map2.jpg);
  94.   background-size: 100% 100%;
  95.   background-position: 100%;
  96.   box-shadow: inset rgba(0,0,0,0.2) 510px 0 50px -140px;
  97.   height: 350px;
  98.   width: 248px;
  99.   position: absolute;
  100.   left: 0;
  101.   top: 0;
  102. }
  103. #book #bottom {
  104.   background: #E7DED1;
  105.   box-shadow: rgba(83, 53, 13, 0.2) 4px 2px 1px,
  106.               #35582C 1px 1px 0px 0px;
  107.   height: 350px;
  108.   width: 253px;
  109.   position: absolute;
  110.   transform: translateZ(-40px);
  111.   left: 0;
  112.   top: 0;
  113. }
  114. #book #shadow {
  115.   animation: shadow 6s ease-in-out infinite;
  116.   box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
  117.   height: 350px;
  118.   width: 248px;
  119.   position: absolute;
  120.   left: -100%;
  121.   top: 0;
  122.   transform: translateZ(-40px);
  123. }
  124. @keyframes shadow {
  125.   20% {
  126.     box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
  127.   }
  128.   50% { 
  129.     box-shadow: inset rgba(83, 53, 13, 0.3) -350px 0 150px -140px;
  130.   }
  131.   60% { 
  132.     box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
  133.   }
  134. }
  135. #book #front {
  136.   background: -webkit-linear-gradient(top,#FCF6EA, #D8D1C3);
  137.   background-size: 100% 2px; 
  138.   box-shadow: inset #C2BBA2 3px 0 0px, #35582C -2px 1px 0px 0px;
  139.   height: 40px;
  140.   width: 251px;
  141.     left: -3px;
  142.   position: absolute;
  143.   bottom: -40px;
  144.   transform: rotateX(-90deg);
  145.   transform-origin: 50% 0;
  146.   border-top-left-radius: 5px;
  147.   border-bottom-left-radius: 5px;
  148. }
  149. #book #right {
  150.   background: -webkit-linear-gradient(left,#DDD2BB, #BDB3A0);
  151.   background-size: 2px 100%; 
  152.   box-shadow: inset rgba(0,0,0,0) 0 0 0 20px;
  153.   height: 100%;
  154.   width: 40px;
  155.   position: absolute;
  156.   right: -40px;
  157.   top: 0;
  158.   transform: rotateY(90deg);
  159.   transform-origin: 0 50%;
  160. }
  161.  
  162. h4 {
  163.   position: absolute;
  164.   bottom: 20px;
  165.   left: 20px;
  166.   margin: 0;
  167.   font-weight: 200;
  168.   opacity: 1;
  169. 	font-family: sans-serif;
  170.   color: rgba(0,0,0,0.3); 
  171. }
  172.  
  173. /* bookmark */
  174.  
  175. #bookmark {
  176.   position: absolute;
  177.   transform: translate3d(20px,350px,-16px);
  178.   transform-style: preserve-3d;
  179. }
  180. #bookmark div {
  181.   background: rgb(151, 88, 88);
  182.   box-shadow: rgb(133,77,77) 1px 0;
  183.   height: 10px;
  184.   width: 20px;
  185.   position: absolute;
  186.   top: 9px;
  187.   transform: rotateX(-14deg);
  188.   transform-origin: 50% 0;
  189.   transform-style: preserve-3d;
  190. }
  191. #bookmark > div > div {
  192.   background: linear-gradient(top, rgb(151, 88, 88), rgb(189, 123, 123), rgb(151, 88, 88));
  193. }
  194. #bookmark > div > div > div {
  195.   background: linear-gradient(top,rgb(151, 88, 88),rgb(133, 77, 77));
  196. }
  197. #bookmark > div > div > div > div {
  198.   background: none;
  199.   border-top: 0px solid transparent;
  200.   border-right: 10px solid rgb(133, 77, 77);
  201.   border-bottom: 10px solid transparent;
  202.   border-left: 10px solid rgb(133, 77, 77);
  203.   height: 0;
  204.   width: 0;
  205. }
  206. #bookmark-shadow {
  207.   background: linear-gradient(top,rgba(83, 53, 13, 0.25),rgba(83, 53, 13, 0.11));
  208.   height: 15px;
  209.   width: 20px;
  210.   position: absolute;
  211.   transform: translate3d(12px,350px,-25px) rotateX(-90deg) skewX(20deg);
  212.   transform-origin: 0 0;
  213. }

以上就是CSS3 制作的书本翻页特效的详细内容，更多关于CSS3 书本翻页特效的资料请关注w3xue其它相关文章！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS3热门文章

  • CSS3选择器新增问题的实现_css3_CSS
  • CSS3实现列表无限滚动/轮播效果_css3_CSS
  • CSS3 Tab动画实例之背景切换动态效果_css3_CSS
  • Github上流行的CSS3动画效果库 animate.css
  • CSS3通过var()和calc()函数实现动画特效_css3_CSS
  • CSS3动画之DIY Loading动画
  • CSS中这个函数你会用吗？垂直居中都可以设置
  • 巧用 CSS3的webkit-box-reflect 倒影实现各类动效_css3_CSS
  • CSS3实现的3D隧道效果_css3_CSS
  • CSS3过渡旋转透视2d3d动画等效果的实例代码_css3_CSS

    • CSS3推荐文章

  • 【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究
  • 可视化学习：如何生成简单动画让图形动起来
  • 【布局进阶】巧用 :has & drop-shadow 实现复杂布局效果
  • 【动画进阶】神奇的背景，生化危机4日食 Loading 动画还原
  • 【动画进阶】神奇的 3D 磨砂玻璃透视效果
  • 快速构建页面结构的 3D Visualization
  • 详解CSS3.0(Cascading Style Sheet) 层叠级联样式表_css3_CSS
  • CSS3实现的3D隧道效果_css3_CSS
  • CSS3实现的侧滑菜单_css3_CSS
  • CSS3常见动画的实现方式_css3_CSS

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号