应用纯CSS完成书本三d换页实际效果的示例

日期:2020-09-19 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

今日刚开始~网编将与大伙儿共享1系列的web前端开发殊效荟萃,喜爱盘玩儿酷炫实际效果的小伙子伴赶快看过来^_^ ,期待大伙儿喜爱呦~

第1期,给大伙儿共享1个应用纯CSS完成书本三d换页实际效果, 有关CSS编码以下:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF⑻">
  <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(⑴0px) rotateX(60deg) rotateZ(29deg)!important;
          transform: translateZ(⑴0px) rotateX(60deg) rotateZ(29deg)!important;
  -webkit-transform-style: preserve⑶d;
          transform-style: preserve⑶d;
  -webkit-transform-origin: 0 0 0;
          transform-origin: 0 0 0;
}
@-webkit-keyframes wrapper {
  50% {
    -webkit-transform: translateZ(⑴0px) rotateX(60deg) rotateZ(29deg) rotateY(180deg);
            transform: translateZ(⑴0px) rotateX(60deg) rotateZ(29deg) rotateY(180deg);
  }
}
@keyframes wrapper {
  50% {
    -webkit-transform: translateZ(⑴0px) rotateX(60deg) rotateZ(29deg) rotateY(180deg);
            transform: translateZ(⑴0px) 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⑶d;
          transform-style: preserve⑶d;
  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 ⑴px 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) ⑴px ⑴px 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: ⑵3px; -webkit-animation: page 6s ease-in-out infinite; animation: page 6s ease-in-out infinite; }
#flip div > div > div { background-position-x : ⑷6px; } 
#flip div > div > div > div { background-position-x : ⑹9px; }
#flip div > div > div > div > div { background-position-x : ⑼2px; }
#flip div > div > div > div > div > div { background-position-x : ⑴15px; }
#flip div > div > div > div > div > div > div { background-position-x : ⑴38px; }
#flip div > div > div > div > div > div > div > div  { background-position-x : ⑴61px; }
#flip div > div > div > div > div > div > div > div > div { background-position-x : ⑴84px; }
#flip div > div > div > div > div > div > div > div > div > div { background-position-x : ⑵07px; }
#flip div > div > div > div > div > div > div > div > div > div > div { background-position-x : ⑵29px; }
/* the more pieces you have, the smoother the bend is */

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

@keyframes page {
  15% { -webkit-transform: rotateY(⑴0deg); transform: rotateY(⑴0deg); }
  50% { -webkit-transform: rotateY(⑵deg); transform: rotateY(⑵deg); }
  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,⑴0px) rotateX(60deg) rotateZ(29deg);
          transform: translate3d(0px,0px,⑴0px) rotateX(60deg) rotateZ(29deg);
  -webkit-transform-style: preserve⑶d;
          transform-style: preserve⑶d;
  -webkit-transform-origin: 0 0 0;
}
@-webkit-keyframes book {
  25% {
    box-shadow: inset rgba(0,0,0,.2) 0px 0 50px ⑴40px;
  }
  50% {
    box-shadow: inset rgba(0,0,0,.2) 0px 0 50px ⑴40px;
  }
  100% {
    box-shadow: inset rgba(0,0,0,.2) 510px 0 50px ⑴40px;
  }
}
@keyframes book {
  25% {
    box-shadow: inset rgba(0,0,0,.2) 0px 0 50px ⑴40px;
  }
  50% {
    box-shadow: inset rgba(0,0,0,.2) 0px 0 50px ⑴40px;
  }
  100% {
    box-shadow: inset rgba(0,0,0,.2) 510px 0 50px ⑴40px;
  }
}
#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 ⑴40px;
  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(⑷0px);
          transform: translateZ(⑷0px);
  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) ⑵00px 0 150px ⑴40px;
  height: 350px;
  width: 248px;
  position: absolute;
  left: ⑴00%;
  top: 0;
  -webkit-transform: translateZ(⑷0px);
          transform: translateZ(⑷0px);
}
@-webkit-keyframes shadow {
  20% {
    box-shadow: inset rgba(83, 53, 13, 0) ⑵00px 0 150px ⑴40px;
  }
  50% { 
    box-shadow: inset rgba(83, 53, 13, 0.3) ⑶50px 0 150px ⑴40px;
  }
  60% { 
    box-shadow: inset rgba(83, 53, 13, 0) ⑵00px 0 150px ⑴40px;
  }
}
@keyframes shadow {
  20% {
    box-shadow: inset rgba(83, 53, 13, 0) ⑵00px 0 150px ⑴40px;
  }
  50% { 
    box-shadow: inset rgba(83, 53, 13, 0.3) ⑶50px 0 150px ⑴40px;
  }
  60% { 
    box-shadow: inset rgba(83, 53, 13, 0) ⑵00px 0 150px ⑴40px;
  }
}
#book #front {
  background: -webkit-linear-gradient(top,#FCF6EA, #D8D1C3);
  background-size: 100% 2px; 
  box-shadow: inset #C2BBA2 3px 0 0px, #35582C ⑵px 1px 0px 0px;
  height: 40px;
  width: 251px;
    left: ⑶px;
  position: absolute;
  bottom: ⑷0px;
  -webkit-transform: rotateX(⑼0deg);
          transform: rotateX(⑼0deg);
  -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: ⑷0px;
  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,⑴6px);
          transform: translate3d(20px,350px,⑴6px);
  -webkit-transform-style: preserve⑶d;
          transform-style: preserve⑶d;
}
#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(⑴4deg);
          transform: rotateX(⑴4deg);
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  -webkit-transform-style: preserve⑶d;
          transform-style: preserve⑶d;
}
#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,⑵5px) rotateX(⑼0deg) skewX(20deg);
          transform: translate3d(12px,350px,⑵5px) rotateX(⑼0deg) 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完成三d翻书实际效果</h4>
</body>
</html>

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。