如何巧妙的使用CSS3新特性實現(xiàn)一個翻書動畫效果，你知道嗎？

言

在CSS3中新增了很多的新特性，其中使用頻率比較高的應(yīng)該是動畫效果了，它可以幫助我們實現(xiàn)以前使用Javascript才能實現(xiàn)的效果，極大的提高網(wǎng)頁的性能。今天這篇文章我們就來一起看一個使用CSS3新特性完成的翻書效果吧。

本文的源碼已經(jīng)放在了Github上，感興趣的可以clone到本地試試，地址如下。

https://github.com/zhouxiongking/article-pages/blob/master/articles/rollPage/rollPage.html

CSS3

實現(xiàn)效果

首先我們來看看實際的運行效果，動態(tài)圖如下所示。

效果圖

頁面分析

在看到上述的效果圖后，我們來進(jìn)行分析，這個過程是如何實現(xiàn)的。

這個頁面我們通過一個ul包含三個li來實現(xiàn)，每個li都給一個固定的寬度和高度。

第一個li在頁面上靜止不動。
第二個li添加動畫效果，使其直接繞Y軸翻轉(zhuǎn)360度。
第三個li添加動畫效果，但是翻轉(zhuǎn)周期是在25%的時候開始，因此會有一種翻書的速度差異感。

上面的步驟分析完后就剩下最重要的一個過程，那就是給外層的ul元素添加perspective屬性，這個屬性是決定這個動畫能不能實現(xiàn)的主要的因素。

perspective

perspective是CSS3中新增的屬性，表示的是設(shè)置某個元素被查看的視角，用于實現(xiàn)3D效果。

需要注意的是當(dāng)某個元素設(shè)置了perspective屬性時，其子元素會獲得透視效果，而不是這個元素本身。

我們來看一個簡單的例子，有一個section父元素和一個div子元素，讓div元素旋轉(zhuǎn)45度，html元素如下。

html元素

其對應(yīng)的CSS屬性如下。

CSS屬性

在section元素上，如果不使用perspective的情況下，得到效果如下圖所示。

效果圖1

如果給section元素加上perspective屬性，并設(shè)定600px時，得到的效果圖如下。

效果圖

通過以上兩幅圖的對比我們發(fā)現(xiàn)，兩幅圖在Y軸的視角上發(fā)生了變化。

接下來，我們來具體看看這個翻書效果的代碼實現(xiàn)。

翻書效果HTML代碼

通過之前的分析，我們知道這個效果是通過ul與li來實現(xiàn)的，html部分代碼如下。

HTML代碼

翻書效果CSS代碼

首先看看ul與li的基本css屬性，記住這里需要給ul元素添加perspective屬性。

基本CSS屬性

然后是給第二個li添加動畫。

第二個li的css屬性

最后是給第三個li添加動畫。

第三個li的css屬性

注意到上面的代碼中有個25%和100%的設(shè)置，這個和第二個li不同，所以會有一種翻轉(zhuǎn)書頁快慢的差異感。

如果按照上述代碼來做，即可實現(xiàn)文章開始的翻書動畫效果。

結(jié)束語

今天這篇文章主要是通過CSS3新增的屬性實現(xiàn)了一個翻書動畫效果，大家學(xué)會了嗎？

urnjs4下載

官網(wǎng)： http://www.turnjs.com/
首頁download下來里面包括所需要的js，一些例子和api

頁面功能說明

在html中用一個<div/>作為容器管理所有的頁面，往div內(nèi)添加頁面有三種方式：

直接在flipbook里面添加元素

<div id="flipbook">
   <div>第1頁</div>
   <div>第2頁</div>
   <div>第3頁</div>
</div>

用api里提供的方法添加

<div id="flipbook">
   <!-- 在這里添加頁 -->
</div>

第一種和第二種方式結(jié)合

<div id="flipbook">
   <div>第1頁</div>
   <!-- 在這里添加頁 -->
   <div>最后1頁</div>
</div>

樣式功能說明

hard屬性

<!--把紙張變成硬紙板，翻頁的時候效果如翻紙板-->
<div id="flipbook">
    <div class="hard">第1頁</div>
    <div>第2頁</div>
    <div>第3頁</div>
</div>

own-size屬性-紙張大小

<!--自定義書內(nèi)紙張大小，style-->
<div id="flipbook">
   <div class="own-size" style="width: 200px; height: 200px;">第1頁</div>
   <div class="own-size" style="width: 200px; height: 200px;">第2頁</div>
   <div>第3頁</div>
</div>

p[0-9]+ 樣式增加

//設(shè)置頁面樣式 
<div id="flipbook">
    <div>第1頁</div>  //在css中寫.p1{}, 第一頁會自己加上.p1
    <div>第2頁</div>
    <div>第3頁</div>
</div>

構(gòu)造方法

$('#flipbook').turn([options]);

配置項說明

$('.flipbook').turn({
    width: 922,         //寬度
    height: 600,        //高度
    acceleration: true, //硬件加速, 默認(rèn)true, 如果是觸摸設(shè)備設(shè)置為true
    autoCenter: false,  //自動居中, 默認(rèn)false
    display: 'double',  //單頁顯示/雙頁顯示  single/double
    duration: 1000,     //翻頁速度(毫秒), 默認(rèn)600ms
    gradients: true,    //翻頁時的陰影漸變, 默認(rèn)true
    inclination: 0,
    page: 1,            //設(shè)置當(dāng)前顯示第幾頁
    //pages: 4,         //總頁數(shù)
    when: {}            //監(jiān)聽事件
});

使用方法說明

語法

$('.flipbook').turn('方法名'[, 參數(shù)],);   
//不需要turn()返回值的時候，可以連這寫
$('.flipbook').turn('方法名'[, 參數(shù)],).turn('方法');

addPage增加頁面

//增加一頁
//兩個參數(shù) 1,jquery對象（頁面） 2,頁號（非必填,默認(rèn)是往最后一頁后面加一頁）
$('.flipbook').turn('addPage', $('<div/>'), 3);

dispaly單雙頁設(shè)置

//一個參數(shù) single/double 單頁/雙頁 顯示
$('.flipbook').turn('display', 'double');

//獲取display屬性值
$('.flipbook').turn('display');  //返回single or double

removePage刪除頁面

//移除指定頁
//一個參數(shù) 頁號
$('.flipbook').turn('removePage' , 2); //移除第二頁

hasPage頁面是否存在

//指定頁是否存在
//一個參數(shù) 頁號
$('.flipbook').turn('hasPage' , 1); //如果該頁存在，返回true

next翻到下一頁

//翻到下一頁
$('.flipbook').turn('next');

previous翻到上一頁

//翻到上一頁
$('.flipbook').turn('previous');

is是否存在

//是否存在turn()實例
$('.flipbook').turn('is'); //存在返回true

page跳轉(zhuǎn)指定頁

//翻到指定頁
$('.flipbook').turn('page' , 2); //翻到第二頁

//返回當(dāng)前顯示第幾頁
$('.flipbook').turn('page');

pages設(shè)置總頁數(shù)

//設(shè)置總頁數(shù)
$('.flipbook').turn('pages' , 2);

//返回總頁數(shù)
$('.flipbook').turn('pages');

peel那個角度翻頁

//展示從哪個角翻頁
//一個參數(shù)   tl-左上角 bl-左下角 tr-右上角 br-右下角 l-左 r-右
$('.flipbook').turn('peel' , 'br');

//不顯示
$('.flipbook').turn('peel' , false);

// r和l在設(shè)置class=hard時才有效果

size設(shè)置大小

//設(shè)置大小
//兩個參數(shù) 1,width 2,height
$('.flipbook').turn('size', 922 ,600);

//返回紙的大小{width: xx, height:xx}
$('.flipbook').turn('size');

stop停止翻頁效果

//停止動畫效果
$('.flipbook').turn('page', 3).turn('stop'); //沒有翻頁動畫

zoom縮放

//縮放
//兩個參數(shù) 1,縮放倍數(shù) 2, 縮放動畫持續(xù)事件（感覺沒起作用啊）
$('.flipbook').turn('zoom', 0.6, 500);

//返回縮放倍數(shù)，默認(rèn)1
$('.flipbook').turn('zoom');

事件使用說明

兩種方式添加事件

1. turn()構(gòu)造方法里面的 when: {}
2. bind()

start動作開始觸發(fā)

//頁面上的任何一個動作開始觸發(fā)
when: {
    start: function (event, page, pageObj) {
        console.log('start');
    }

$('.flipbook').bind('start', function (event, page, pageObj) {
    console.log('start');
});

end動作結(jié)束觸發(fā)

//頁面上的任何一個動作結(jié)束觸發(fā)
when: {
    end: function (event, page, pageObj) {
        console.log('end');
    }

$('.flipbook').bind('end', function (event, page, pageObj) {
    console.log('end');
});

first第一頁觸發(fā)

//當(dāng)在第一頁時觸發(fā)
when: {
    first: function (event) {
        console.log('first page');
    }

$('.flipbook').bind('first', function (event) {
    console.log('first page');
});

last最后一頁觸發(fā)

//當(dāng)在最后一頁時觸發(fā)
when: {
    last: function (event) {
        console.log('last page');
    }

$('.flipbook').bind('last', function (event) {
    console.log('last page');
});

turning翻頁前觸發(fā)

//翻頁前觸發(fā)
//event
//page $('.flipbook').turn('page') 
//view $('.flipbook').turn('view'); 
when: {
    turning: function (event, page, view) {
        console.log('turning', page, view); //page 和 view 顯示的是當(dāng)前展示的頁號
    }

$('.flipbook').bind('turning', function (event, page, view) {
    console.log('turning', page, view);
});

turned翻頁后觸發(fā)

//翻頁后觸發(fā)
//event
//page $('.flipbook').turn('page')
//view $('.flipbook').turn('view'); 
when: {
    turned: function (event, page, view) {
        console.log('turned');
    }

$('.flipbook').bind('turned', function (event, page, view) {
    console.log('turned');
});

zooming縮放觸發(fā)

4年的時候小編還是個苦逼青年（說的好像現(xiàn)在不苦逼一樣）閑來無事，想做一本屬于自己的電子書，最開始的時候，我想的是利用html進(jìn)行網(wǎng)頁文檔的制作，結(jié)果發(fā)現(xiàn)自己毫無網(wǎng)頁基礎(chǔ)，實在是舉步維艱,畢竟小編是個24k純理工男，學(xué)的還是化學(xué)專業(yè)。

不過不要緊，在我的孜孜不倦和勇于探索的精神下，終于找到一款簡單易學(xué)，零網(wǎng)頁基礎(chǔ)，零電腦基礎(chǔ)，零排版基礎(chǔ)，零智商基礎(chǔ)的翻頁電子書制作軟件：iebook （讓大家賤笑了）

在那個苦逼的買不起電腦的年代，小編天天泡在網(wǎng)吧，旁邊是各種小學(xué)生風(fēng)騷犀利的lol操作讓我自愧不如，經(jīng)過一個星期的鉆研（只怪中途網(wǎng)吧斷電，文檔無情的沒有備份，那感覺讓人絕望）終于做出了人生自己的第一本電子書——《后青春期的詩》效果大概是這樣的：

iebook的功能是能實現(xiàn)翻頁，背景音樂，點擊跳轉(zhuǎn)，自動滾動等，如果你想做散文詩歌或者故事類的文章，不失為一個不錯的選擇。

最終效果一般是以exe格式存在，也可以在線發(fā)表，看起來是不是很高大上？

說到技術(shù)含量嘛，前面也說過，不難，只要具備基本的審美觀和核心內(nèi)容，加上模板的插入，音樂的插入，制作出一本exe文檔的電子書簡直易如反掌，就像走在路上隨隨便便就能撿張毛爺爺一樣，就是這么easy。對電子書感興趣的朋友可以關(guān)注小編公眾號fish1923 回復(fù)“軟件”獲取iebook，或者回復(fù)“電子書”查看本人制作的電子書，歡迎探討學(xué)習(xí)。

不過正所謂“師傅領(lǐng)進(jìn)門，修行靠個人”任何軟件的應(yīng)用本質(zhì)上是很簡單的，例如ps，例如cad，但是要想做到極致卻需要付出很大的努力。就iebook這個軟件來說，我隨便講幾個關(guān)鍵點，也許會對你的制作方面有些幫助，讓你少走一些彎路。

插入幀。
就以標(biāo)準(zhǔn)組件來說，一般會有卷首頁，封面，版頁，封底。我們主要是插入版頁如圖所示：

點擊添加頁面就會右方菜單欄出現(xiàn)多個幀，每一幀就是我們說的“每一頁”，所謂幀，通俗點說就是一個單位，可以理解為ps里的每一個圖層，每一幀都是靜止的圖象。你只需要在每一個幀上編輯即可。

然后插入文字，模板，都是可以手動拖拽的，復(fù)制、放大、縮小、旋轉(zhuǎn)等等操作，都灰常方便。

2.關(guān)于模板的下載

在添加完幀之后，接下來就是模板的下載了

如圖所示，不管是組合模板，還是頁面背景，圖文，文字模板，裝飾，特效。點擊下方的模板下載，都是會跳轉(zhuǎn)到iebook官方網(wǎng)站下載的，比較精美的當(dāng)然是需要付費下載的（這個世界沒有免費的午餐）。

3.關(guān)于屬性欄的設(shè)置。

這就不多說了吧，零智商操作，音樂可以從電腦端導(dǎo)入，我就不廢話了。

4.生成的電子雜志去哪里了？

正在編譯(生成)EXE電子雜志；
電子雜志編譯(生成)完畢；單擊打開文件夾按鈕，打開電子雜志所在路徑，您可以將生成好的電子雜志發(fā)給好友分享；己經(jīng)編譯完畢的電子雜志，預(yù)覽整體效果。

這樣，一篇精美的翻頁電子書就生成了，是不是一下子就由一個屌絲青年變身成為文藝小青年了，總的來說，這款軟件還是十分簡單好用的。

其實，誰又天生優(yōu)秀呢？優(yōu)秀來源于對簡單事情的重復(fù)操作和追求極致的精神。歡迎關(guān)注小編公眾號fish1923 探討學(xué)習(xí)！

在線咨詢

上一篇：js 跳轉(zhuǎn)頁面方式詳解
下一篇：大神卡帕西強(qiáng)烈推薦：通過做項目來學(xué)習(xí)，堅持“1萬小時定律”

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商