亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS3實(shí)現(xiàn)3D翻書(shū)效果

  發(fā)布時(shí)間：2016-06-20 11:01:34   作者：佚名   我要評(píng)論
這篇文章主要介紹了CSS3實(shí)現(xiàn)3D翻書(shū)效果，基于CSS3新屬性Animation及transform實(shí)現(xiàn)類(lèi)似翻書(shū)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

先上效果圖：（樣式有點(diǎn)丑，可以忽略一下下，效果出來(lái)了就好，后期加到其他項(xiàng)目中方便更改0.0）

類(lèi)似翻書(shū)效果，原本的意思是使用JS來(lái)控制的，點(diǎn)擊一次之后使用setInterval去控制書(shū)頁(yè)翻過(guò)去的動(dòng)畫(huà)，當(dāng)書(shū)頁(yè)翻轉(zhuǎn)180°之后，清除掉setInterval，但當(dāng)我連續(xù)點(diǎn)擊，那之前沒(méi)有翻轉(zhuǎn)180°的書(shū)頁(yè)將無(wú)法繼續(xù)完成之前的動(dòng)作，可以用清除setInterval的方式，但總感覺(jué)動(dòng)畫(huà)效果不好，當(dāng)然還有其他解決辦法，但突然想到，CSS3為我們提供了animation，我們?yōu)槭裁床蝗ナ褂檬褂媚?，只要為加上animation動(dòng)畫(huà)就可以直接避免這個(gè)問(wèn)題，animation動(dòng)畫(huà)默認(rèn)是每次都執(zhí)行完動(dòng)畫(huà)，所以，當(dāng)出現(xiàn)連點(diǎn)的時(shí)候，就會(huì)像圖中看到的那樣，每一頁(yè)都自然翻頁(yè)，下面貼上代碼，及實(shí)現(xiàn)步驟：
注：本實(shí)例JS部分均以原生JS編寫(xiě)，不善用原生JS的，可用jQuery等對(duì)三方框架改寫(xiě)
html部分：（這部分真心·····，算了，丑就丑點(diǎn)吧~.~）

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <body>  
  2.     <!-- 所展示的書(shū)的內(nèi)容 -->  
  3.     <div class="book">  
  4.         <div class="page">  
  5.             <span>1</span>  
  6.             <span>2</span>  
  7.         </div>  
  8.         <div class="page">  
  9.             <span>3</span>  
  10.             <span>4</span>  
  11.         </div>  
  12.   
  13.         <div class="page">  
  14.             <span>5</span>  
  15.             <span>6</span>  
  16.         </div>  
  17.   
  18.         <div class="page">  
  19.             <span>7</span>  
  20.             <span>8</span>  
  21.         </div>  
  22.   
  23.         <div class="page">  
  24.             <span>9</span>  
  25.             <span>10</span>  
  26.         </div>  
  27.   
  28.         <div class="page">  
  29.             <span>11</span>  
  30.             <span>12</span>  
  31.         </div>  
  32.   
  33.         <div class="page">  
  34.             <span>13</span>  
  35.             <span>14</span>  
  36.         </div>  
  37.   
  38.         <div class="page">  
  39.             <span>15</span>  
  40.             <span>16</span>  
  41.         </div>  
  42.   
  43.         <div class="page">  
  44.             <span>17</span>  
  45.             <span>18</span>  
  46.         </div>  
  47.   
  48.         <div class="page">  
  49.             <span>19</span>  
  50.             <span>20</span>  
  51.         </div>  
  52.     </div>  
  53.   
  54.     <!-- 用來(lái)控制上一頁(yè)和下一頁(yè)操作 -->  
  55.     <input type="button" value="上一頁(yè)" id="before"/>  
  56.     <input type="button" value="下一頁(yè)" id="after"/>  
  57. </body>    

CSS部分：（通過(guò)改變transform中rotatey的值，來(lái)實(shí)現(xiàn)書(shū)頁(yè)的翻轉(zhuǎn)效果）

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2.         .book{   
  3.             width: 460px;   
  4.             height: 300px;   
  5.             position: relative;   
  6.             margin: 150px 400px;   
  7.             -webkit-transform-style: preserve-3d;   
  8.             -moz-transform-style: preserve-3d;   
  9.             -ms-transform-style: preserve-3d;   
  10.             transform-style: preserve-3d;   
  11.             transform: rotatex(30deg);   
  12.         }   
  13.         .page{   
  14.             width: 230px;   
  15.             height: 300px;   
  16.   
  17.             border: 1px solid #666;   
  18.             position: absolute;   
  19.             rightright: 0;   
  20.             transform-origin: left;   
  21.             transform-style: preserve-3d;   
  22.             backface-visibility:hidden;   
  23.             font-size: 60px;   
  24.             text-align: center;   
  25.             line-height: 300px;   
  26.         }   
  27.         .page span{   
  28.             display: block;   
  29.             width: 100%;   
  30.             position: absolute;   
  31.             background-color: #00FFFF;   
  32.         }   
  33.         .page span:nth-child(2){   
  34.             transform: rotatey(-180deg);   
  35.             backface-visibility:hidden;   
  36.         }   
  37.   
  38.   
  39.         /*以下兩個(gè)動(dòng)畫(huà)可以只使用第一個(gè)，animation中有reverse，可以反向執(zhí)行動(dòng)畫(huà)，  
  40.             使用時(shí)需要在JS中點(diǎn)擊上一頁(yè)時(shí)添加改屬性值*/  
  41.         /*翻書(shū)下一頁(yè)的動(dòng)畫(huà)*/  
  42.         @keyframes page {   
  43.             0%{   
  44.                 transform: rotatey(0deg);   
  45.             }   
  46.             100%{   
  47.                 transform: rotatey(-180deg);   
  48.                 z-index: 10;   
  49.             }   
  50.         }   
  51.         /*翻書(shū)上一頁(yè)的動(dòng)畫(huà)*/  
  52.         @keyframes page1 {   
  53.             0%{   
  54.                 transform: rotatey(-180deg);   
  55.                 z-index: 10;   
  56.             }   
  57.             100%{   
  58.                 transform: rotatey(0deg);   
  59.             }   
  60.         }   
  61.            
  62.     </style>   

JS部分（JS部分主要實(shí)現(xiàn)點(diǎn)擊上/下一頁(yè)時(shí)，為相應(yīng)的div添加animation屬性）

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. <script>   
  2.     var before = document.querySelector("#before");   
  3.     var after = document.querySelector("#after");   
  4.     var book = document.querySelector(".book");   
  5.     var page = document.getElementsByClassName("page"); 7     rotate();   
  6.   
  7.     function rotate(){   
  8.         var middle = 0;12         for(var z=0;z<book.children.length;z++){   
  9.             page[z].style.zIndex = book.children.length-z;   
  10.         }   
  11.         after.onclick = function(){   
  12.             if(middle != book.children.length){   
  13.                 page[middle].style.animation = "page 1.5s linear 1 forwards";   
  14.                 middle++;   
  15.             }else{   
  16.                 middle = book.children.length;   
  17.             }   
  18.         };   
  19.         before.onclick = function(){   
  20.             if(middle != 0){   
  21.                 page[middle-1].style.animation = "page1 1.5s linear 1 forwards";   
  22.                 middle--;   
  23.         }else{   
  24.             middle = 0;   
  25.             }   
  26.         }   
  27.     }   
  28. </script>   

關(guān)于最后JS部分，主要作用在于，當(dāng)點(diǎn)擊上/下一頁(yè)時(shí)，為相應(yīng)的div添加animation屬性，具體animation的詳解，還是需要查看API。
 
介于兼容性的問(wèn)題，這里比較好的解決辦法是添加class，而不是去添加animation，為適應(yīng)更多瀏覽器，需要添加前綴-webkit-、-moz-·······，所以在一個(gè)類(lèi)中寫(xiě)好這些東西，直接添加類(lèi)就可以了，或者寫(xiě)一個(gè)函數(shù)，封裝好，能直接輸出需要的字符串就好。

相關(guān)文章

  • css3一款3D字體帶陰影效果的實(shí)現(xiàn)步驟

    3D字體而且還帶有陰影，這種效果想必大家只有認(rèn)為一些高級(jí)的作圖工具才可以實(shí)現(xiàn)的吧，css3的出現(xiàn)讓這一切看似不可能的實(shí)現(xiàn)成為可能，接下來(lái)為大家介紹下3D字體帶陰影效果的
    2013-03-20

  • html5的canvas實(shí)現(xiàn)3d雪花飄舞效果

    使用HTML5 的canvas標(biāo)簽和 three.js 實(shí)現(xiàn)了 3D 的雪花飛舞效果。你可以拖動(dòng)鼠標(biāo)進(jìn)行旋轉(zhuǎn)，需要在支持CSS3屬性的瀏覽器下瀏覽
    2013-12-27

  • css3的圖形3d翻轉(zhuǎn)效果應(yīng)用示例

    這篇文章主要介紹了css3 的圖形3d翻轉(zhuǎn)效果應(yīng)用,需要的朋友可以參考下
    2014-04-08

  • HTML5制作3D愛(ài)心動(dòng)畫(huà)教程 獻(xiàn)給女友浪漫的禮物

    這篇文章主要為大家介紹了一個(gè)利用HTML5和CSS3制作的3D愛(ài)心動(dòng)畫(huà)的教程，可以再任何的時(shí)間地點(diǎn)送給自己的女友，相當(dāng)?shù)睦寺P(guān)鍵是代碼相當(dāng)簡(jiǎn)單，直接復(fù)制也可以哦
    2014-11-05

  • 一款利用純css3實(shí)現(xiàn)的超炫3D表單的實(shí)例教程

    今天要給大家分享一款純css3實(shí)現(xiàn)的超炫3D表單。該特效頁(yè)面的加載的時(shí)候3d四十五度傾斜，當(dāng)鼠標(biāo)經(jīng)過(guò)的時(shí)候表單動(dòng)畫(huà)回正。效果非常炫，有具體的代碼，大家可以嘗試制作哦
    2014-12-01

  • css3實(shí)現(xiàn)3D色子翻轉(zhuǎn)特效

    這篇文章主要介紹了css3實(shí)現(xiàn)3D色子翻轉(zhuǎn)特效的制作過(guò)程及示例代碼，非常的不錯(cuò)，效果也非常棒，這里推薦給大家。
    2014-12-23

  • 一款基于css3麻將篩子3D翻轉(zhuǎn)特效的實(shí)例教程

    這篇文章主要為大家介紹了一款基于css3麻將篩子3D翻轉(zhuǎn)特效的實(shí)例教程，css3使我們能夠跳出2d空間，實(shí)現(xiàn)3維空間的動(dòng)畫(huà)效果，這里給出一個(gè)自動(dòng)翻轉(zhuǎn)的3d色子動(dòng)畫(huà)效果制作過(guò)程
    2014-12-31

  • 一款利用html5和css3實(shí)現(xiàn)的3D滾動(dòng)特效的教程

    怎么利用css3和html5制作圓形很正方形的3D滾動(dòng)特效，今天給大家?guī)?lái)一款html5和css3實(shí)現(xiàn)的3D滾動(dòng)特效。代碼很全，不會(huì)的朋友可以可以進(jìn)來(lái)學(xué)習(xí)一下，需要的朋友可以參考下
    2015-01-04

  • css3實(shí)現(xiàn)3d旋轉(zhuǎn)動(dòng)畫(huà)特效

    這篇文章主要介紹了css3實(shí)現(xiàn)3d旋轉(zhuǎn)動(dòng)畫(huà)特效，使用CSS3實(shí)現(xiàn)了3d立方體的左旋轉(zhuǎn)，右旋轉(zhuǎn)，上下旋轉(zhuǎn)等效果，十分實(shí)用，有需要的小伙伴來(lái)參考下吧
    2015-03-10

  • 利用HTML5繪制點(diǎn)線面組成的3D圖形的示例

    這篇文章主要介紹了利用HTML5繪制點(diǎn)線面組成的3D圖形的示例,主要還是利用了HTML5中的Canvas API,需要的朋友可以參考下
    2015-05-12

最新評(píng)論