建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
小編給大家分享一下CSS3如何實(shí)現(xiàn)3D翻書(shū)效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
目前創(chuàng)新互聯(lián)公司已為成百上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、德陽(yáng)網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。
先上效果圖：（樣式有點(diǎn)丑，可以忽略一下下，效果出來(lái)了就好，后期加到其他項(xiàng)目中方便更改0.0）
類(lèi)似翻書(shū)效果，原本的意思是使用JS來(lái)控制的，點(diǎn)擊一次之后使用setInterval去控制書(shū)頁(yè)翻過(guò)去的動(dòng)畫(huà)，當(dāng)書(shū)頁(yè)翻轉(zhuǎn)180°之后，清除掉setInterval，但當(dāng)我連續(xù)點(diǎn)擊，那之前沒(méi)有翻轉(zhuǎn)180°的書(shū)頁(yè)將無(wú)法繼續(xù)完成之前的動(dòng)作，可以用清除setInterval的方式，但總感覺(jué)動(dòng)畫(huà)效果不好，當(dāng)然還有其他解決辦法，但突然想到，CSS3為我們提供了animation，我們?yōu)槭裁床蝗ナ褂檬褂媚?，只要為加上animation動(dòng)畫(huà)就可以直接避免這個(gè)問(wèn)題，animation動(dòng)畫(huà)默認(rèn)是每次都執(zhí)行完動(dòng)畫(huà)，所以，當(dāng)出現(xiàn)連點(diǎn)的時(shí)候，就會(huì)像圖中看到的那樣，每一頁(yè)都自然翻頁(yè)，下面貼上代碼，及實(shí)現(xiàn)步驟：
注：本實(shí)例JS部分均以原生JS編寫(xiě)，不善用原生JS的，可用jQuery等對(duì)三方框架改寫(xiě)
html部分：（這部分真心·····，算了，丑就丑點(diǎn)吧~.~）
XML/HTML Code復(fù)制內(nèi)容到剪貼板
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
