使用纯CSS实现书籍3D翻页效果的示例有哪些?

使用纯CSS实现书籍3D翻页效果的示例有哪些?

今天开始~小编将与大家分享一系列的web前端特效荟萃,喜欢把玩儿炫酷效果的小伙伴快快看过来^_^ ,希望大家喜欢呦~

使用纯CSS实现书籍3D翻页效果的示例有哪些?

第一期,给大家分享一个使用纯CSS实现书籍3D翻页效果, 相关CSS代码如下:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>cloth</title>
 <style>
  
html,body {
 height:100%;
 overflow: hidden;
}
body {
 background: -webkit-radial-gradient(#E4CEA6, #9C8763);
 background: radial-gradient(#E4CEA6, #9C8763);
 -webkit-perspective: 900px;
     perspective: 900px;
 margin: 0;
}
#flip {
 -webkit-animation: wrapper 6s ease-in-out infinite;
     animation: wrapper 6s ease-in-out infinite;
 height: 350px;
 width: 253px; 
 position: absolute;
 left: 50%;
 top: 30%;
 -webkit-transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg)!important;
     transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg)!important;
 -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
 -webkit-transform-origin: 0 0 0;
     transform-origin: 0 0 0;
}
@-webkit-keyframes wrapper {
 50% {
  -webkit-transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(180deg);
      transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(180deg);
 }
}
@keyframes wrapper {
 50% {
  -webkit-transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(180deg);
      transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(180deg);
 }
}
#flip div {
 height: 350px;
 width: 24px;
 position: absolute;
 left: calc(100% - 1px);
 -webkit-transform-origin: 0 100%;
     transform-origin: 0 100%;
 -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
 background-size: 253px 350px;
}
#flip #front, 
#flip #front div {
 background-image: url(http://img.hoop8.com/attachments/1512/846611208706.png);
 box-shadow: inset rgba(255,255,255,0.3) 0px -1px 0 0,#35582C 0px 1px 0px 0px;
}
#flip #front > div > div > div > div > div > div > div > div > div > div { 
 box-shadow: inset rgba(255,255,255,0.3) -1px -1px 0 0, #35582C 1px 1px 0px 0px;
}
#flip #back { -webkit-transform: rotateY(.2deg); transform: rotateY(.2deg); } /* avoid pages overlap */
#flip #back,
#flip #back div {
 background-image: url(http://img.hoop8.com/attachments/1512/846611208706.png); 
}

#flip > div { left: 0; background-position-x: 0; }
#flip div > div { background-position-x: -23px; -webkit-animation: page 6s ease-in-out infinite; animation: page 6s ease-in-out infinite; }
#flip div > div > div { background-position-x : -46px; } 
#flip div > div > div > div { background-position-x : -69px; }
#flip div > div > div > div > div { background-position-x : -92px; }
#flip div > div > div > div > div > div { background-position-x : -115px; }
#flip div > div > div > div > div > div > div { background-position-x : -138px; }
#flip div > div > div > div > div > div > div > div { background-position-x : -161px; }
#flip div > div > div > div > div > div > div > div > div { background-position-x : -184px; }
#flip div > div > div > div > div > div > div > div > div > div { background-position-x : -207px; }
#flip div > div > div > div > div > div > div > div > div > div > div { background-position-x : -229px; }
/* the more pieces you have, the smoother the bend is */

@-webkit-keyframes page {
 15% { -webkit-transform: rotateY(-10deg); transform: rotateY(-10deg); }
 50% { -webkit-transform: rotateY(-2deg); transform: rotateY(-2deg); }
 65% { -webkit-transform: rotateY(10deg); transform: rotateY(10deg); }
 100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
}

@keyframes page {
 15% { -webkit-transform: rotateY(-10deg); transform: rotateY(-10deg); }
 50% { -webkit-transform: rotateY(-2deg); transform: rotateY(-2deg); }
 65% { -webkit-transform: rotateY(10deg); transform: rotateY(10deg); }
 100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
}

#book {
 width: 248px;
 height: 350px;
 position: absolute;
 left:50%;
 top: 30%;
 -webkit-transform: translate3d(0px,0px,-10px) rotateX(60deg) rotateZ(29deg);
     transform: translate3d(0px,0px,-10px) rotateX(60deg) rotateZ(29deg);
 -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
 -webkit-transform-origin: 0 0 0;
}
@-webkit-keyframes book {
 25% {
  box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px;
 }
 50% {
  box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px;
 }
 100% {
  box-shadow: inset rgba(0,0,0,.2) 510px 0 50px -140px;
 }
}
@keyframes book {
 25% {
  box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px;
 }
 50% {
  box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px;
 }
 100% {
  box-shadow: inset rgba(0,0,0,.2) 510px 0 50px -140px;
 }
}
#book #top {
 -webkit-animation: book 6s ease-in-out infinite;
     animation: book 6s ease-in-out infinite;
 background: url(http://img.hoop8.com/attachments/1512/900611208706.png);
 background-size: 100% 100%;
 background-position: 100%;
 box-shadow: inset rgba(0,0,0,0.2) 510px 0 50px -140px;
 height: 350px;
 width: 248px;
 position: absolute;
 left: 0;
 top: 0;
}
#book #bottom {
 background: #E7DED1;
 box-shadow: rgba(83, 53, 13, 0.2) 4px 2px 1px,
       #35582C 1px 1px 0px 0px;
 height: 350px;
 width: 253px;
 position: absolute;
 -webkit-transform: translateZ(-40px);
     transform: translateZ(-40px);
 left: 0;
 top: 0;
}
#book #shadow {
 -webkit-animation: shadow 6s ease-in-out infinite;
     animation: shadow 6s ease-in-out infinite;
 box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
 height: 350px;
 width: 248px;
 position: absolute;
 left: -100%;
 top: 0;
 -webkit-transform: translateZ(-40px);
     transform: translateZ(-40px);
}
@-webkit-keyframes shadow {
 20% {
  box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
 }
 50% { 
  box-shadow: inset rgba(83, 53, 13, 0.3) -350px 0 150px -140px;
 }
 60% { 
  box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
 }
}
@keyframes shadow {
 20% {
  box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
 }
 50% { 
  box-shadow: inset rgba(83, 53, 13, 0.3) -350px 0 150px -140px;
 }
 60% { 
  box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
 }
}
#book #front {
 background: -webkit-linear-gradient(top,#FCF6EA, #D8D1C3);
 background-size: 100% 2px; 
 box-shadow: inset #C2BBA2 3px 0 0px, #35582C -2px 1px 0px 0px;
 height: 40px;
 width: 251px;
  left: -3px;
 position: absolute;
 bottom: -40px;
 -webkit-transform: rotateX(-90deg);
     transform: rotateX(-90deg);
 -webkit-transform-origin: 50% 0;
     transform-origin: 50% 0;
 border-top-left-radius: 5px;
 border-bottom-left-radius: 5px;
}
#book #right {
 background: -webkit-linear-gradient(left,#DDD2BB, #BDB3A0);
 background-size: 2px 100%; 
 box-shadow: inset rgba(0,0,0,0) 0 0 0 20px;
 height: 100%;
 width: 40px;
 position: absolute;
 right: -40px;
 top: 0;
 -webkit-transform: rotateY(90deg);
     transform: rotateY(90deg);
 -webkit-transform-origin: 0 50%;
     transform-origin: 0 50%;
}

h4 {
 position: absolute;
 bottom: 20px;
 left: 20px;
 margin: 0;
 font-weight: 200;
 opacity: 1;
 font-family: sans-serif;
 color: rgba(0,0,0,0.3); 
}

/* bookmark */

#bookmark {
 position: absolute;
 -webkit-transform: translate3d(20px,350px,-16px);
     transform: translate3d(20px,350px,-16px);
 -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
}
#bookmark div {
 background: rgb(151, 88, 88);
 box-shadow: rgb(133,77,77) 1px 0;
 height: 10px;
 width: 20px;
 position: absolute;
 top: 9px;
 -webkit-transform: rotateX(-14deg);
     transform: rotateX(-14deg);
 -webkit-transform-origin: 50% 0;
     transform-origin: 50% 0;
 -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
}
#bookmark > div > div {
 background: -webkit-linear-gradient(top, rgb(151, 88, 88), rgb(189, 123, 123), rgb(151, 88, 88));
 background: linear-gradient(top, rgb(151, 88, 88), rgb(189, 123, 123), rgb(151, 88, 88));
}
#bookmark > div > div > div {
 background: -webkit-linear-gradient(top,rgb(151, 88, 88),rgb(133, 77, 77));
 background: linear-gradient(top,rgb(151, 88, 88),rgb(133, 77, 77));
}
#bookmark > div > div > div > div {
 background: none;
 border-top: 0px solid transparent;
 border-right: 10px solid rgb(133, 77, 77);
 border-bottom: 10px solid transparent;
 border-left: 10px solid rgb(133, 77, 77);
 height: 0;
 width: 0;
}
#bookmark-shadow {
 background: -webkit-linear-gradient(top,rgba(83, 53, 13, 0.25),rgba(83, 53, 13, 0.11));
 background: linear-gradient(top,rgba(83, 53, 13, 0.25),rgba(83, 53, 13, 0.11));
 height: 15px;
 width: 20px;
 position: absolute;
 -webkit-transform: translate3d(12px,350px,-25px) rotateX(-90deg) skewX(20deg);
     transform: translate3d(12px,350px,-25px) rotateX(-90deg) skewX(20deg);
 -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
}
 </style>
</head>

 
<body>
 
 <div id='book'>
 <div id='top'></div>
 <div id='front'></div>
 <div id='right'></div>
 <div id='bottom'></div>
 <div id='shadow'></div>
 <div id='bookmark'>
  <div>
   <div>
    <div>
     <div></div>
    </div>
   </div>
  </div>
 </div>
 <div id='bookmark-shadow'></div>
</div>
<div id='flip'>
 <div id='front'>
  <div>
   <div>
    <div>
     <div>
      <div>
       <div>
        <div>
         <div>
          <div>
           <div></div>
          </div>
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
 <div id='back'>
  <div>
   <div>
    <div>
     <div>
      <div>
       <div>
        <div>
         <div>
          <div>
           <div></div>
          </div>
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
<h4>CSS实现3D翻书效果</h4>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持路饭。