整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
在有很多文檔采用的是PDF文件格式，我們可以通過(guò)“云展網(wǎng)”之類(lèi)的在線服務(wù)，將這些PDF轉(zhuǎn)換成帶3D翻頁(yè)效果的電子書(shū)，不但閱讀方便，效果酷炫，而且還能很方便地分享給自己的好友。
簡(jiǎn)單上傳，PDF變身在線電子書(shū)
首先準(zhǔn)備好需要轉(zhuǎn)換的PDF文件，登錄https://book.yunzhan365.com/后按提示先注冊(cè)為用戶(hù)，登錄后選擇“創(chuàng)建HTML5文檔”，接著點(diǎn)擊“上傳我的文檔”，然后按提示將需要轉(zhuǎn)換的PDF文件上傳到網(wǎng)站進(jìn)行轉(zhuǎn)換處理，在這里還可以為在線電子書(shū)設(shè)置背景色、音樂(lè)等信息（圖1）。
圖1 轉(zhuǎn)換文件
小提示：如果要將常見(jiàn)的DOC、PPT等文檔轉(zhuǎn)化為在線書(shū)籍，那么可以利用Word 2016、PPT 2016等，打開(kāi)文檔后點(diǎn)擊“文件→導(dǎo)出→創(chuàng)建PDF/XPS”，將文件轉(zhuǎn)化為PDF后再進(jìn)行上傳即可。
文件轉(zhuǎn)換完畢后會(huì)在“我的圖書(shū)”看到已經(jīng)轉(zhuǎn)換的書(shū)籍，按提示點(diǎn)擊即可開(kāi)始閱讀，轉(zhuǎn)換后的書(shū)籍和在線電子書(shū)非常類(lèi)似，在電腦上我們直接使用鼠標(biāo)進(jìn)行翻頁(yè)閱讀即可（圖2）。
圖2 閱讀轉(zhuǎn)換后的書(shū)籍
當(dāng)然這個(gè)在線書(shū)籍同樣可以轉(zhuǎn)發(fā)給微信、QQ好友，點(diǎn)擊上述頁(yè)面的分享按鈕，然后將類(lèi)似http://www.yunzhan365.com/read/gnsc/biec/mobile/index.html這樣的網(wǎng)址復(fù)制。這樣我們需要和微信好友共享超過(guò)25MB的PDF文檔時(shí)。只要先通過(guò)上述的方法轉(zhuǎn)化為在線文檔，然后將分享的網(wǎng)址發(fā)動(dòng)給好友。好友在微信中直接打開(kāi)其中的鏈接，在微信中就可以直接進(jìn)行閱讀，省去直接傳送PDF和微信25MB文件大小的限制，因?yàn)檫@里分享的只是一個(gè)網(wǎng)址（圖3）。
圖3 微信里閱讀在線書(shū)籍
當(dāng)然如果是企業(yè)宣傳使用，如直接把產(chǎn)品的說(shuō)明文檔制作成翻頁(yè)電子書(shū)。那么可以將文檔上傳轉(zhuǎn)化，接著點(diǎn)擊“分享鏈接”，在彈出的窗口將“插入到網(wǎng)站”代碼復(fù)制。在公司主頁(yè)頁(yè)面，將這段代碼插入到首頁(yè)文件中，這樣用戶(hù)在訪問(wèn)官網(wǎng)時(shí)，就可以通過(guò)點(diǎn)擊鏈接直接打開(kāi)宣傳點(diǎn)在文檔了（圖4）。
圖4 插入網(wǎng)頁(yè)代碼
在CSS3中新增了很多的新特性，其中使用頻率比較高的應(yīng)該是動(dòng)畫(huà)效果了，它可以幫助我們實(shí)現(xiàn)以前使用Javascript才能實(shí)現(xiàn)的效果，極大的提高網(wǎng)頁(yè)的性能。今天這篇文章我們就來(lái)一起看一個(gè)使用CSS3新特性完成的翻書(shū)效果吧。
本文的源碼已經(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)畫(huà)效果，使其直接繞Y軸翻轉(zhuǎn)360度。
第三個(gè)li添加動(dòng)畫(huà)效果，但是翻轉(zhuǎn)周期是在25%的時(shí)候開(kāi)始，因此會(huì)有一種翻書(shū)的速度差異感。
上面的步驟分析完后就剩下最重要的一個(gè)過(guò)程，那就是給外層的ul元素添加perspective屬性，這個(gè)屬性是決定這個(gè)動(dòng)畫(huà)能不能實(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ū)效果的代碼實(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)畫(huà)。
第二個(gè)li的css屬性
最后是給第三個(gè)li添加動(dòng)畫(huà)。
第三個(gè)li的css屬性
注意到上面的代碼中有個(gè)25%和100%的設(shè)置，這個(gè)和第二個(gè)li不同，所以會(huì)有一種翻轉(zhuǎn)書(shū)頁(yè)快慢的差異感。
如果按照上述代碼來(lái)做，即可實(shí)現(xiàn)文章開(kāi)始的翻書(shū)動(dòng)畫(huà)效果。
今天這篇文章主要是通過(guò)CSS3新增的屬性實(shí)現(xiàn)了一個(gè)翻書(shū)動(dòng)畫(huà)效果，大家學(xué)會(huì)了嗎？
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
CSS視頻教程第21課 超實(shí)用的翻頁(yè)
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
