使用CSS3的新特性完成一個翻書的動畫效果，來學習一下吧

言

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

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

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

CSS3

實現效果

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

效果圖

頁面分析

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

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

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

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

perspective

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

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

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

html元素

其對應的CSS屬性如下。

CSS屬性

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

效果圖1

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

效果圖

通過以上兩幅圖的對比我們發現，兩幅圖在Y軸的視角上發生了變化。

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

翻書效果HTML代碼

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

HTML代碼

翻書效果CSS代碼

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

基本CSS屬性

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

第二個li的css屬性

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

第三個li的css屬性

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

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

結束語

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

urnjs4下載

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

頁面功能說明

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

直接在flipbook里面添加元素

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

用api里提供的方法添加

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

第一種和第二種方式結合

<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屬性-紙張大小

<!--自定義書內紙張大小，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]+ 樣式增加

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

構造方法

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

配置項說明

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

使用方法說明

語法

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

addPage增加頁面

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

dispaly單雙頁設置

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

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

removePage刪除頁面

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

hasPage頁面是否存在

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

next翻到下一頁

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

previous翻到上一頁

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

is是否存在

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

page跳轉指定頁

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

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

pages設置總頁數

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

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

peel那個角度翻頁

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

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

// r和l在設置class=hard時才有效果

size設置大小

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

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

stop停止翻頁效果

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

zoom縮放

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

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

事件使用說明

兩種方式添加事件

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

start動作開始觸發

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

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

end動作結束觸發

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

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

first第一頁觸發

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

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

last最后一頁觸發

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

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

turning翻頁前觸發

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

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

turned翻頁后觸發

//翻頁后觸發
//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縮放觸發

果圖

今天給大家帶來的是 CSS3圖片翻頁動畫（10種動畫）！

豐富一下列位的特效儲備庫！

文件版源碼獲取，請看評論區！

廢話不多說，上源碼！

CSS源碼：

@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

@font-face {

font-family: 'codropsicons';

src:url('../fonts/codropsicons/codropsicons.eot');

src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),

url('../fonts/codropsicons/codropsicons.woff') format('woff'),

url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),

url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');

font-weight: normal;

font-style: normal;

}

body {

background: #81c439;

color: #fff;

font-family: 'Lato', Arial, sans-serif;

}

.clearfix:before,

.clearfix:after {

content: '';

display: table;

}

.clearfix:after {

clear: both;

}

a {

color: rgba(255,255,255,0.7);

text-decoration: none;

outline: none;

}

a:hover,

a:focus {

color: #fff

}

.container > header {

margin: 0 auto;

padding: 2em 15% 0;

text-align: center;

}

.container > header h1 {

font-size: 1.8em;

line-height: 1.3;

margin: 0;

font-weight: 700;

text-transform: uppercase;

letter-spacing: 2px;

word-spacing: 5px;

}

.container > header span {

display: block;

font-size: 60%;

opacity: 0.7;

padding: 0 0 0.6em 0.1em;

}

/* To Navigation Style */

.codrops-top {

background: rgba(255, 255, 255, 0.1);

text-transform: uppercase;

width: 100%;

font-size: 0.69em;

line-height: 2.2;

font-weight: 700;

}

.codrops-top a {

text-decoration: none;

padding: 0 1em;

letter-spacing: 0.1em;

display: inline-block;

}

.codrops-top a:hover {

background: rgba(255,255,255,0.95);

color: #81c439;

}

.codrops-top span.right {

float: right;

}

.codrops-top span.right a {

float: left;

display: block;

}

.codrops-icon:before {

font-family: 'codropsicons';

margin: 0 4px;

speak: none;

font-style: normal;

font-weight: normal;

font-variant: normal;

text-transform: none;

line-height: 1;

-webkit-font-smoothing: antialiased;

}

.codrops-icon-drop:before {

content: "\e001";

}

.codrops-icon-prev:before {

content: "\e004";

}

/* Demo Buttons Style */

.codrops-demos {

padding-top: 1em;

max-width: 700px;

margin: 0 auto;

}

.codrops-demos a {

text-decoration: none;

outline: none;

display: inline-block;

font-weight: 700;

text-transform: uppercase;

font-size: 0.8em;

margin: 0.5em 0.4em;

letter-spacing: 1px;

background: rgba(0,0,0,0.1);

padding: 0.4em 0.9em;

-webkit-transition: all 0.2s;

transition: all 0.2s;

}

.codrops-demos a.current-demo,

.codrops-demos a:hover,

.codrops-demos a:focus {

opacity: 1;

background: rgba(0,0,0,0.25);

}

section {

text-align: center;

font-size: 150%;

padding: 1em 1% 2em;

}

@media screen and (max-width: 25em) {

.codrops-icon span {

display: none;

}

index源碼：

<!DOCTYPE html>

<html>

<head>

<title>Animations for Thumbnail Grids | Demo 1</title>

</head>

<body>

<div>

<h1>網格縮略圖動畫</h1>

<nav>

<a href="index2.html">Slide</a>

<a href="index3.html">Rotate Fall</a>

<a href="index4.html">Rotate Scale</a>

<a href="index5.html">Stack</a>

<a href="index7.html">Bring back</a>

<a href="index8.html">Superscale</a>

<a href="index9.html">Center Flip</a>

<a href="index10.html">Front Row</a>

</nav>

</header>

</ul>

<nav>

</nav>

</section>

</div>

</body>

</html>

在線咨詢

上一篇：jQuery中的prop和attr
下一篇：搭起音樂與耳朵的「橋」！發燒友都應擁有的未來音源PNA nBridge+

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

使用CSS3的新特性完成一個翻書的動畫效果，來學習一下吧

言

實現效果

頁面分析

perspective

翻書效果HTML代碼

翻書效果CSS代碼

結束語

urnjs4下載

頁面功能說明

樣式功能說明

hard屬性

own-size屬性-紙張大小

p[0-9]+ 樣式增加

構造方法

配置項說明

使用方法說明

語法

addPage增加頁面

dispaly單雙頁設置

removePage刪除頁面

hasPage頁面是否存在

next翻到下一頁

previous翻到上一頁

is是否存在

page跳轉指定頁

pages設置總頁數

peel那個角度翻頁

size設置大小

stop停止翻頁效果

zoom縮放

事件使用說明

start動作開始觸發

end動作結束觸發

first第一頁觸發

last最后一頁觸發

turning翻頁前觸發

turned翻頁后觸發

zooming縮放觸發

CSS源碼：

index源碼：

您的項目需求