整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
家好，今天跟大家分享的是CSS3動(dòng)態(tài)日記翻頁(yè)效果的實(shí)現(xiàn)方法，老規(guī)矩，先看效果
翻開效果
閉合效果
接下來(lái)講解具體操作步驟，相信觀看過(guò)小編前幾期教程的同學(xué)應(yīng)該對(duì)CSS3的“rotate”屬性都不陌生，在輪播圖那期我們已經(jīng)初步體驗(yàn)來(lái)它的效果，這一期主要用到的還是這個(gè)旋轉(zhuǎn)屬性。
最外層的div(.book)主要用來(lái)調(diào)控日記本在頁(yè)面的位置和添加一些立體效果；第二層div(.page-box-n)用來(lái)設(shè)置翻頁(yè)效果；最里面的div(.page-n)用來(lái)設(shè)置具體每一頁(yè)的樣式。有一點(diǎn)要注意的是在HTML中頁(yè)面的順序是從后向前排列，這樣后面用絕對(duì)定位將他們浮在一起時(shí)才會(huì)按正常順序前后排列（可參考absolute原理）。
HTML結(jié)構(gòu)
日記延左側(cè)翻頁(yè)—原理：如果我們直接讓page頁(yè)延Y軸旋轉(zhuǎn)它會(huì)延自身Y軸居中旋轉(zhuǎn)，因此我們可以把page頁(yè)設(shè)置為page-box的一半定位在右側(cè)再讓page-box延Y軸旋轉(zhuǎn)就可以實(shí)現(xiàn)page頁(yè)延左邊框旋轉(zhuǎn)了。
翻頁(yè)原理
基本樣式：給body添加一個(gè)背景顏色，用perspective添加一個(gè)觀察點(diǎn)（目的是為了看上去更立體）。
添加立體效果：“transform-style: perspective-3d”讓元素在3D空間內(nèi)呈現(xiàn)，延X軸旋轉(zhuǎn)30°調(diào)整可視面，這兩步也是為了讓元素看上去更立體。
page-box設(shè)置：給所有的page-box設(shè)置相同的寬高，position設(shè)為absolute使其重疊在一起，并調(diào)整到相應(yīng)的位置。
page頁(yè)通用設(shè)置：設(shè)置page頁(yè)的寬高，與父元素page-box同高，寬度為page-box的一半，left:50%定位在page-box的右側(cè)，添加一像素實(shí)線邊框，顏色最好與封面主題色調(diào)一致（親測(cè)效果好些）。
封面樣式：給封面添加一個(gè)背景圖片（自選），大小與page頁(yè)一致。
內(nèi)容頁(yè)樣式：根據(jù)實(shí)際情況給內(nèi)容頁(yè)添加一定的樣式（字體、顏色、邊距等），根據(jù)個(gè)人喜好隨便搞。
添加翻頁(yè)效果：這里所有頁(yè)面的動(dòng)畫效果都一樣，只需設(shè)置每個(gè)page-box都延Y軸旋轉(zhuǎn)即可，只是旋轉(zhuǎn)的角度和效果持續(xù)及延遲的時(shí)間稍有不同，自己在做的時(shí)候根據(jù)所需效果調(diào)節(jié)即可，下面是相應(yīng)的動(dòng)畫設(shè)置和動(dòng)畫引入代碼。
封面
第二頁(yè)
第三頁(yè)
大功告成，現(xiàn)在可以刷新你的頁(yè)面看看效果了！
感興趣的同學(xué)現(xiàn)在就試試吧！如果發(fā)現(xiàn)問(wèn)題請(qǐng)@窗外樓。
在CSS3中新增了很多的新特性，其中使用頻率比較高的應(yīng)該是動(dòng)畫效果了，它可以幫助我們實(shí)現(xiàn)以前使用Javascript才能實(shí)現(xiàn)的效果，極大的提高網(wǎng)頁(yè)的性能。今天這篇文章我們就來(lái)一起看一個(gè)使用CSS3新特性完成的翻書效果吧。
本文的源碼已經(jīng)放在了Github上，感興趣的可以clone到本地試試，地址如下。
https://github.com/zhouxiongking/article-pages/blob/master/articles/rollPage/rollPage.html
CSS3
首先我們來(lái)看看實(shí)際的運(yùn)行效果，動(dòng)態(tài)圖如下所示。
效果圖
在看到上述的效果圖后，我們來(lái)進(jìn)行分析，這個(gè)過(guò)程是如何實(shí)現(xiàn)的。
這個(gè)頁(yè)面我們通過(guò)一個(gè)ul包含三個(gè)li來(lái)實(shí)現(xiàn)，每個(gè)li都給一個(gè)固定的寬度和高度。
第一個(gè)li在頁(yè)面上靜止不動(dòng)。
第二個(gè)li添加動(dòng)畫效果，使其直接繞Y軸翻轉(zhuǎn)360度。
第三個(gè)li添加動(dòng)畫效果，但是翻轉(zhuǎn)周期是在25%的時(shí)候開始，因此會(huì)有一種翻書的速度差異感。
上面的步驟分析完后就剩下最重要的一個(gè)過(guò)程，那就是給外層的ul元素添加perspective屬性，這個(gè)屬性是決定這個(gè)動(dòng)畫能不能實(shí)現(xiàn)的主要的因素。
perspective是CSS3中新增的屬性，表示的是設(shè)置某個(gè)元素被查看的視角，用于實(shí)現(xiàn)3D效果。
需要注意的是當(dāng)某個(gè)元素設(shè)置了perspective屬性時(shí)，其子元素會(huì)獲得透視效果，而不是這個(gè)元素本身。
我們來(lái)看一個(gè)簡(jiǎn)單的例子，有一個(gè)section父元素和一個(gè)div子元素，讓div元素旋轉(zhuǎn)45度，html元素如下。
html元素
其對(duì)應(yīng)的CSS屬性如下。
CSS屬性
在section元素上，如果不使用perspective的情況下，得到效果如下圖所示。
效果圖1
如果給section元素加上perspective屬性，并設(shè)定600px時(shí)，得到的效果圖如下。
效果圖
通過(guò)以上兩幅圖的對(duì)比我們發(fā)現(xiàn)，兩幅圖在Y軸的視角上發(fā)生了變化。
接下來(lái)，我們來(lái)具體看看這個(gè)翻書效果的代碼實(shí)現(xiàn)。
通過(guò)之前的分析，我們知道這個(gè)效果是通過(guò)ul與li來(lái)實(shí)現(xiàn)的，html部分代碼如下。
HTML代碼
首先看看ul與li的基本css屬性，記住這里需要給ul元素添加perspective屬性。
基本CSS屬性
然后是給第二個(gè)li添加動(dòng)畫。
第二個(gè)li的css屬性
最后是給第三個(gè)li添加動(dòng)畫。
第三個(gè)li的css屬性
注意到上面的代碼中有個(gè)25%和100%的設(shè)置，這個(gè)和第二個(gè)li不同，所以會(huì)有一種翻轉(zhuǎn)書頁(yè)快慢的差異感。
如果按照上述代碼來(lái)做，即可實(shí)現(xiàn)文章開始的翻書動(dòng)畫效果。
今天這篇文章主要是通過(guò)CSS3新增的屬性實(shí)現(xiàn)了一個(gè)翻書動(dòng)畫效果，大家學(xué)會(huì)了嗎？
在CSS3中新增了很多的新特性，其中使用頻率比較高的應(yīng)該是動(dòng)畫效果了，它可以幫助我們實(shí)現(xiàn)以前使用Javascript才能實(shí)現(xiàn)的效果，極大的提高網(wǎng)頁(yè)的性能。今天這篇文章我們就來(lái)一起看一個(gè)使用CSS3新特性完成的翻書效果吧。
本文的源碼已經(jīng)放在了Github上，感興趣的可以clone到本地試試，地址如下。
https://github.com/zhouxiongking/article-pages/blob/master/articles/rollPage/rollPage.html
CSS3
首先我們來(lái)看看實(shí)際的運(yùn)行效果，動(dòng)態(tài)圖如下所示。
效果圖
在看到上述的效果圖后，我們來(lái)進(jìn)行分析，這個(gè)過(guò)程是如何實(shí)現(xiàn)的。
這個(gè)頁(yè)面我們通過(guò)一個(gè)ul包含三個(gè)li來(lái)實(shí)現(xiàn)，每個(gè)li都給一個(gè)固定的寬度和高度。
第一個(gè)li在頁(yè)面上靜止不動(dòng)。
第二個(gè)li添加動(dòng)畫效果，使其直接繞Y軸翻轉(zhuǎn)360度。
第三個(gè)li添加動(dòng)畫效果，但是翻轉(zhuǎn)周期是在25%的時(shí)候開始，因此會(huì)有一種翻書的速度差異感。
上面的步驟分析完后就剩下最重要的一個(gè)過(guò)程，那就是給外層的ul元素添加perspective屬性，這個(gè)屬性是決定這個(gè)動(dòng)畫能不能實(shí)現(xiàn)的主要的因素。
perspective是CSS3中新增的屬性，表示的是設(shè)置某個(gè)元素被查看的視角，用于實(shí)現(xiàn)3D效果。
需要注意的是當(dāng)某個(gè)元素設(shè)置了perspective屬性時(shí)，其子元素會(huì)獲得透視效果，而不是這個(gè)元素本身。
我們來(lái)看一個(gè)簡(jiǎn)單的例子，有一個(gè)section父元素和一個(gè)div子元素，讓div元素旋轉(zhuǎn)45度，html元素如下。
html元素
其對(duì)應(yīng)的CSS屬性如下。
CSS屬性
在section元素上，如果不使用perspective的情況下，得到效果如下圖所示。
效果圖1
如果給section元素加上perspective屬性，并設(shè)定600px時(shí)，得到的效果圖如下。
效果圖
通過(guò)以上兩幅圖的對(duì)比我們發(fā)現(xiàn)，兩幅圖在Y軸的視角上發(fā)生了變化。
接下來(lái)，我們來(lái)具體看看這個(gè)翻書效果的代碼實(shí)現(xiàn)。
通過(guò)之前的分析，我們知道這個(gè)效果是通過(guò)ul與li來(lái)實(shí)現(xiàn)的，html部分代碼如下。
HTML代碼
首先看看ul與li的基本css屬性，記住這里需要給ul元素添加perspective屬性。
基本CSS屬性
然后是給第二個(gè)li添加動(dòng)畫。
第二個(gè)li的css屬性
最后是給第三個(gè)li添加動(dòng)畫。
第三個(gè)li的css屬性
注意到上面的代碼中有個(gè)25%和100%的設(shè)置，這個(gè)和第二個(gè)li不同，所以會(huì)有一種翻轉(zhuǎn)書頁(yè)快慢的差異感。
如果按照上述代碼來(lái)做，即可實(shí)現(xiàn)文章開始的翻書動(dòng)畫效果。
今天這篇文章主要是通過(guò)CSS3新增的屬性實(shí)現(xiàn)了一個(gè)翻書動(dòng)畫效果，大家學(xué)會(huì)了嗎？
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
