基於CSS3新屬性Animation及transform實現類似翻書效果

来源:http://www.cnblogs.com/LUOQIANangel/archive/2016/06/19/5598512.html
-Advertisement-
Play Games

註:本實例JS部分均以原生JS編寫,不善用原生JS的,可用jQuery等對三方框架改寫 先上效果圖:(樣式有點醜,可以忽略一下下,效果出來了就好,後期加到其他項目中方便更改0.0) 類似翻書效果,原本的意思是使用JS來控制的,點擊一次之後使用setInterval去控制書頁翻過去的動畫,當書頁翻轉1 ...


註:本實例JS部分均以原生JS編寫,不善用原生JS的,可用jQuery等對三方框架改寫

先上效果圖:(樣式有點醜,可以忽略一下下,效果出來了就好,後期加到其他項目中方便更改0.0)

類似翻書效果,原本的意思是使用JS來控制的,點擊一次之後使用setInterval去控制書頁翻過去的動畫,當書頁翻轉180°之後,清除掉setInterval,但當我連續點擊,那之前沒有翻轉180°的書頁將無法繼續完成之前的動作,可以用清除setInterval的方式,但總感覺動畫效果不好,當然還有其他解決辦法,但突然想到,CSS3為我們提供了animation,我們為什麼不去使用使用呢,只要為加上animation動畫就可以直接避免這個問題,animation動畫預設是每次都執行完動畫,所以,當出現連點的時候,就會像圖中看到的那樣,每一頁都自然翻頁,下麵貼上代碼,及實現步驟:

html部分:(這部分真心·····,算了,醜就醜點吧~.~)

<body>
    <!-- 所展示的書的內容 -->
    <div class="book">
        <div class="page">
            <span>1</span>
            <span>2</span>
        </div>
        <div class="page">
            <span>3</span>
            <span>4</span>
        </div>
        <div class="page">
            <span>5</span>
            <span>6</span>
        </div>
        <div class="page">
            <span>7</span>
            <span>8</span>
        </div>
        <div class="page">
            <span>9</span>
            <span>10</span>
        </div>
        <div class="page">
            <span>11</span>
            <span>12</span>
        </div>
        <div class="page">
            <span>13</span>
            <span>14</span>
        </div>
        <div class="page">
            <span>15</span>
            <span>16</span>
        </div>
        <div class="page">
            <span>17</span>
            <span>18</span>
        </div>
        <div class="page">
            <span>19</span>
            <span>20</span>
        </div>
    </div>
    <!-- 用來控制上一頁和下一頁操作 -->
    <input type="button" value="上一頁" id="before"/>
    <input type="button" value="下一頁" id="after"/>
</body>

CSS部分:(通過改變transform中rotatey的值,來實現書頁的翻轉效果)

 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             right: 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         /*以下兩個動畫可以只使用第一個,animation中有reverse,可以反向執行動畫,
40             使用時需要在JS中點擊上一頁時添加改屬性值*/
41         /*翻書下一頁的動畫*/
42         @keyframes page {
43             0%{
44                 transform: rotatey(0deg);
45             }
46             100%{
47                 transform: rotatey(-180deg);
48                 z-index: 10;
49             }
50         }
51         /*翻書上一頁的動畫*/
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部分主要實現點擊上/下一頁時,為相應的div添加animation屬性)

 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();
 8 
 9     function rotate(){
10         var middle = 0;12         for(var z=0;z<book.children.length;z++){
13             page[z].style.zIndex = book.children.length-z;
14         }
15         after.onclick = function(){
16             if(middle != book.children.length){
17                 page[middle].style.animation = "page 1.5s linear 1 forwards";
18                 middle++;
19             }else{
20                 middle = book.children.length;
21             }
22         };
23         before.onclick = function(){
24             if(middle != 0){
25                 page[middle-1].style.animation = "page1 1.5s linear 1 forwards";
26                 middle--;
27         }else{
28             middle = 0;
29             }
30         }
31     }
32 </script>

關於最後JS部分,主要作用在於,當點擊上/下一頁時,為相應的div添加animation屬性,具體animation的詳解,還是需要查看API。

介於相容性的問題,這裡比較好的解決辦法是添加class,而不是去添加animation,為適應更多瀏覽器,需要添加首碼-webkit-、-moz-·······,所以在一個類中寫好這些東西,直接添加類就可以了,或者寫一個函數,封裝好,能直接輸出需要的字元串就好。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • C++引用的學習: 通常引用第一個作用,人們會想到的是引用的變數的別名;(可以說是直接操作這個變數); 引用的聲明: Type + & + name(可以認為是一個常指針) 註意:(1)&是起標識符的作用; (2)聲明引用時,必須先將其進行初始化; (3)不能建立數組的引用,因為數組是因為由若幹個元 ...
  • shell變數的賦值、變數的取值、變數的取消與查看、局部變數/用戶變數、全局變數/環境變數、特殊變數 ...
  • 本文將介紹Java多線程開發必不可少的鎖和同步機制,同時介紹sleep和wait等常用的暫停線程執行的方法,並詳述synchronized的幾種使用方式,以及Java中的重入鎖(ReentrantLock)和讀寫鎖(ReadWriteLock),之後結合實例分析了重入鎖條件變數(Condition)... ...
  • 1 設計模式 類是我們面向對象編程的承載工具,可以說是面向對象的起點。 設計模式,這種算面向對象的進化。按照gof設計模式的分類 設計模式分為:創建型,結構型,行為型。 其中創建型主要和類的創建有關 結構性組織擴展類和類之間的關係 行為型主要擴展的類的訪問 這三個對應到類上 創建型模式對應的是構造函 ...
  • 數組的增加 ary.push() 向數組末尾添加元素,返回的是添加後新數組的長度,原有數組改變 ary.unshift() 向數組開頭添加元素,返回的是添加後新數組的長度,原有數組改變 var ary=[1,2,3,4]; var res=ary.unshift(6); console.log(re ...
  • 先上代碼,下麵是使用例子。 上面是HTML代碼,下麵是調用方法。 調用方法很簡單吧! 再來一個處理多行數據的例子。 data2={"data":[{"帳號":"yeruzhao1","name":"葉如兆","avatar":"http:\/\/shp.qpic.cn\/bizmp\/3eJCszw ...
  • 前言: 上周天的時候有個學長找我幫忙做三張頁面,因為沒有數據交換之類的,只是單純的前端頁面,想著好久沒做東西, 看書都看煩了,所以就接了也當是練手。之前因為沒有系統的看書,所以其實很多問題都考慮的不全面,屬於知其然不知其所以然的狀態,雖然現在也還有很多要學的東西,但是知道自己的不足總比不知道強吧?而 ...
  • var myDate = new Date();myDate.getYear(); //獲取當前年份(2位)myDate.getFullYear(); //獲取完整的年份(4位,1970-????)myDate.getMonth(); //獲取當前月份(0-11,0代表1月)myDate.getDa ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...