欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3 制作的書本翻頁特效

  發(fā)布時間：2021-04-12 17:16:10   作者：Fabrizio Bianchi   我要評論
這篇文章主要介紹了CSS3 制作的書本翻頁特效，幫助大家更好的理解和學習使用CSS3，感興趣的朋友可以了解下

實現(xiàn)效果：

實現(xiàn)代碼：

html

<!-- Please heart it if you like! -->
<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 Bending Effect - Page Flip</h4>

CSS3

/* remember to use - transform-style: preserve-3d; */
html,body {
  height:100%;
  overflow: hidden;
}
body {
  background: radial-gradient(#E4CEA6, #9C8763);
  perspective: 900px;
  margin: 0;
}
#flip {
  animation: wrapper 6s ease-in-out infinite;
  height: 350px;
  width: 253px; 
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(0deg)!important;
  transform-style: preserve-3d;
  transform-origin: 0 0 0;
}
@keyframes wrapper {
  50% {
    transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
  }
}
#flip div {
  height: 350px;
  width: 24px;
  position: absolute;
  left: calc(100% - 1px);
  transform-origin: 0 100%;
  transform-style: preserve-3d;
  background-size: 253px 350px;
}
#flip #front, 
#flip #front div {
  background-image: url(http://blogs.slj.com/afuse8production/files/2012/06/Hobbit1.jpg);
  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 { transform: rotateY(.4deg); transform-origin: -100% 0; } /* avoid pages overlap */
#flip #back,
#flip #back div {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/164210/map1_.jpg); 
}

#flip > div {  left: 0;  background-position-x: 0; }
#flip div > div { background-position-x: -23px; 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 */

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

#book {
  width: 248px;
  height: 350px;
  position: absolute;
  left:50%;
  top: 30%;
  transform: translate3d(0px,0px,-10px) rotateX(60deg) rotateZ(29deg);
  transform-style: preserve-3d;
  -webkit-transform-origin: 0 0 0;
}
@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 {
  animation: book 6s ease-in-out infinite;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/164210/map2.jpg);
  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;
  transform: translateZ(-40px);
  left: 0;
  top: 0;
}
#book #shadow {
  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;
  transform: translateZ(-40px);
}
@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;
  transform: rotateX(-90deg);
  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;
  transform: rotateY(90deg);
  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;
  transform: translate3d(20px,350px,-16px);
  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;
  transform: rotateX(-14deg);
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}
#bookmark > div > div {
  background: linear-gradient(top, rgb(151, 88, 88), rgb(189, 123, 123), rgb(151, 88, 88));
}
#bookmark > div > div > div {
  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: linear-gradient(top,rgba(83, 53, 13, 0.25),rgba(83, 53, 13, 0.11));
  height: 15px;
  width: 20px;
  position: absolute;
  transform: translate3d(12px,350px,-25px) rotateX(-90deg) skewX(20deg);
  transform-origin: 0 0;
}

以上就是CSS3 制作的書本翻頁特效的詳細內容，更多關于CSS3 書本翻頁特效的資料請關注腳本之家其它相關文章！

相關文章

  • css3實現(xiàn)書本翻頁效果的示例代碼

    這篇文章主要介紹了css3實現(xiàn)書本翻頁效果的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習
    2021-03-08

  • css3鼠標懸停圖片3D翻頁顯示文字描述特效

    css3鼠標懸停圖片3D翻頁顯示文字描述特效是一款css3制作的鼠標懸停圖片3D翻頁顯示文字介紹，非常好看的圖文翻轉展示特效。
    2020-09-10

  • 純CSS3實現(xiàn)雜志翻頁動畫特效

    這是一個實現(xiàn)純CSS3雜志翻頁動畫特效源碼，可點擊前后導航按鈕，來像翻閱雜志一樣，前后翻看不同的頁面，簡單實用
    2020-03-18

  • 純CSS3實現(xiàn)的書籍自動翻頁動畫效果源碼

    這是一款基于純CSS3實現(xiàn)的書籍自動翻頁動畫效果源碼。畫面中心擺放著一本書，隨著書籍封面的打開，其內部紙張頁面也逐頁自動翻開，紙張翻動帶有較為逼真的立體視覺效果
    2019-07-26

  • js+css3實現(xiàn)的翻頁動畫效果數(shù)字時鐘源碼

    這是一款基于js+css3實現(xiàn)的翻頁動畫效果數(shù)字時鐘源碼。畫面中的數(shù)字時鐘呈現(xiàn)出翻頁變換顯示時間的效果
    2017-08-15

  • 純css3實現(xiàn)的書本翻頁動畫特效源碼

    這是一款基于純css3實現(xiàn)的書本翻頁動畫特效源碼。界面上呈現(xiàn)出書頁的翻動展開與折疊動畫效果，動畫效果流暢自然
    2017-02-15

  • CSS3實現(xiàn)的答題卡翻頁切換特效源碼

    是一款實現(xiàn)了問答式答題卡翻頁切換效果代碼，成功回答當前答題卡上的問題后，該卡片就會上滑小時，從而突顯出下一張答題卡及內容，本段代碼適應于所有網(wǎng)頁使用，有需要的朋
    2016-10-28

  • jQuery和CSS3實現(xiàn)彈性過渡全屏翻頁特效源碼

    jQuery和CSS3實現(xiàn)彈性過渡全屏翻頁特效源碼是一款可以通過點擊導航按鈕來全屏切換頁面，在頁面切換時，整個頁面以彈性變形的方式過渡到下一個頁面。本段代碼適應于所有網(wǎng)頁
    2016-08-26

  • jQuery+CSS3實現(xiàn)的全屏垂直翻頁特效源碼

    jQuery+CSS3全屏垂直翻頁代碼是一款帶過渡效果的全屏垂直翻頁特效插件，該全屏翻頁插件在頁面上下滾動時一次翻一屏，并帶有CSS3過渡動畫效果
    2015-03-11

  • 一款很酷的CSS3翻頁時鐘動畫特效源碼

    今天我們來分享一款風格獨特的時鐘特效源碼，這款CSS3時鐘動畫是一款數(shù)字時鐘，時間每過一秒，相應的位置就會像翻日歷一樣翻過去。另外，這款CSS3數(shù)字時鐘有點立體的效果，
    2014-11-22

最新評論