怎么使用純CSS實(shí)現(xiàn)書籍3D翻頁(yè)效果
這篇文章主要介紹了怎么使用純CSS實(shí)現(xiàn)書籍3D翻頁(yè)效果，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),天山企業(yè)網(wǎng)站建設(shè),天山品牌網(wǎng)站建設(shè),網(wǎng)站定制,天山網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,天山網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
使用純CSS實(shí)現(xiàn)書籍3D翻頁(yè)效果，代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cloth</title>
<style>
html,body {
height:100%;
overflow: hidden;
}
body {
background: -webkit-radial-gradient(#E4CEA6, #9C8763);
background: radial-gradient(#E4CEA6, #9C8763);
-webkit-perspective: 900px;
perspective: 900px;
margin: 0;
}
#flip {
-webkit-animation: wrapper 6s ease-in-out infinite;
animation: wrapper 6s ease-in-out infinite;
height: 350px;
width: 253px;
position: absolute;
left: 50%;
top: 30%;
-webkit-transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg)!important;
transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg)!important;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 0 0 0;
transform-origin: 0 0 0;
}
@-webkit-keyframes wrapper {
50% {
-webkit-transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(180deg);
transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(180deg);
}
}
@keyframes wrapper {
50% {
-webkit-transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(180deg);
transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(180deg);
}
}
#flip div {
height: 350px;
width: 24px;
position: absolute;
left: calc(100% - 1px);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
background-size: 253px 350px;
}
#flip #front,
#flip #front div {
background-image: url(http://img.hoop8.com/attachments/1512/846611208706.png);
box-shadow: inset rgba(255,255,255,0.3) 0px -1px 0 0,#35582C 0px 1px 0px 0px;
}
#flip #front > div > div > div > div > div > div > div > div > div > div {
box-shadow: inset rgba(255,255,255,0.3) -1px -1px 0 0, #35582C 1px 1px 0px 0px;
}
#flip #back { -webkit-transform: rotateY(.2deg); transform: rotateY(.2deg); } /* avoid pages overlap */
#flip #back,
#flip #back div {
background-image: url(http://img.hoop8.com/attachments/1512/846611208706.png);
}
#flip > div { left: 0; background-position-x: 0; }
#flip div > div { background-position-x: -23px; -webkit-animation: page 6s ease-in-out infinite; animation: page 6s ease-in-out infinite; }
#flip div > div > div { background-position-x : -46px; }
#flip div > div > div > div { background-position-x : -69px; }
#flip div > div > div > div > div { background-position-x : -92px; }
#flip div > div > div > div > div > div { background-position-x : -115px; }
#flip div > div > div > div > div > div > div { background-position-x : -138px; }
#flip div > div > div > div > div > div > div > div { background-position-x : -161px; }
#flip div > div > div > div > div > div > div > div > div { background-position-x : -184px; }
#flip div > div > div > div > div > div > div > div > div > div { background-position-x : -207px; }
#flip div > div > div > div > div > div > div > div > div > div > div { background-position-x : -229px; }
/* the more pieces you have, the smoother the bend is */
@-webkit-keyframes page {
15% { -webkit-transform: rotateY(-10deg); transform: rotateY(-10deg); }
50% { -webkit-transform: rotateY(-2deg); transform: rotateY(-2deg); }
65% { -webkit-transform: rotateY(10deg); transform: rotateY(10deg); }
100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
}
@keyframes page {
15% { -webkit-transform: rotateY(-10deg); transform: rotateY(-10deg); }
50% { -webkit-transform: rotateY(-2deg); transform: rotateY(-2deg); }
65% { -webkit-transform: rotateY(10deg); transform: rotateY(10deg); }
100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
}
#book {
width: 248px;
height: 350px;
position: absolute;
left:50%;
top: 30%;
-webkit-transform: translate3d(0px,0px,-10px) rotateX(60deg) rotateZ(29deg);
transform: translate3d(0px,0px,-10px) rotateX(60deg) rotateZ(29deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 0 0 0;
}
@-webkit-keyframes book {
25% {
box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px;
}
50% {
box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px;
}
100% {
box-shadow: inset rgba(0,0,0,.2) 510px 0 50px -140px;
}
}
@keyframes book {
25% {
box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px;
}
50% {
box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px;
}
100% {
box-shadow: inset rgba(0,0,0,.2) 510px 0 50px -140px;
}
}
#book #top {
-webkit-animation: book 6s ease-in-out infinite;
animation: book 6s ease-in-out infinite;
background: url(http://img.hoop8.com/attachments/1512/900611208706.png);
background-size: 100% 100%;
background-position: 100%;
box-shadow: inset rgba(0,0,0,0.2) 510px 0 50px -140px;
height: 350px;
width: 248px;
position: absolute;
left: 0;
top: 0;
}
#book #bottom {
background: #E7DED1;
box-shadow: rgba(83, 53, 13, 0.2) 4px 2px 1px,
#35582C 1px 1px 0px 0px;
height: 350px;
width: 253px;
position: absolute;
-webkit-transform: translateZ(-40px);
transform: translateZ(-40px);
left: 0;
top: 0;
}
#book #shadow {
-webkit-animation: shadow 6s ease-in-out infinite;
animation: shadow 6s ease-in-out infinite;
box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
height: 350px;
width: 248px;
position: absolute;
left: -100%;
top: 0;
-webkit-transform: translateZ(-40px);
transform: translateZ(-40px);
}
@-webkit-keyframes shadow {
20% {
box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
}
50% {
box-shadow: inset rgba(83, 53, 13, 0.3) -350px 0 150px -140px;
}
60% {
box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
}
}
@keyframes shadow {
20% {
box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
}
50% {
box-shadow: inset rgba(83, 53, 13, 0.3) -350px 0 150px -140px;
}
60% {
box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
}
}
#book #front {
background: -webkit-linear-gradient(top,#FCF6EA, #D8D1C3);
background-size: 100% 2px;
box-shadow: inset #C2BBA2 3px 0 0px, #35582C -2px 1px 0px 0px;
height: 40px;
width: 251px;
left: -3px;
position: absolute;
bottom: -40px;
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
#book #right {
background: -webkit-linear-gradient(left,#DDD2BB, #BDB3A0);
background-size: 2px 100%;
box-shadow: inset rgba(0,0,0,0) 0 0 0 20px;
height: 100%;
width: 40px;
position: absolute;
right: -40px;
top: 0;
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
h5 {
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
font-weight: 200;
opacity: 1;
font-family: sans-serif;
color: rgba(0,0,0,0.3);
}
/* bookmark */
#bookmark {
position: absolute;
-webkit-transform: translate3d(20px,350px,-16px);
transform: translate3d(20px,350px,-16px);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#bookmark div {
background: rgb(151, 88, 88);
box-shadow: rgb(133,77,77) 1px 0;
height: 10px;
width: 20px;
position: absolute;
top: 9px;
-webkit-transform: rotateX(-14deg);
transform: rotateX(-14deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#bookmark > div > div {
background: -webkit-linear-gradient(top, rgb(151, 88, 88), rgb(189, 123, 123), rgb(151, 88, 88));
background: linear-gradient(top, rgb(151, 88, 88), rgb(189, 123, 123), rgb(151, 88, 88));
}
#bookmark > div > div > div {
background: -webkit-linear-gradient(top,rgb(151, 88, 88),rgb(133, 77, 77));
background: linear-gradient(top,rgb(151, 88, 88),rgb(133, 77, 77));
}
#bookmark > div > div > div > div {
background: none;
border-top: 0px solid transparent;
border-right: 10px solid rgb(133, 77, 77);
border-bottom: 10px solid transparent;
border-left: 10px solid rgb(133, 77, 77);
height: 0;
width: 0;
}
#bookmark-shadow {
background: -webkit-linear-gradient(top,rgba(83, 53, 13, 0.25),rgba(83, 53, 13, 0.11));
background: linear-gradient(top,rgba(83, 53, 13, 0.25),rgba(83, 53, 13, 0.11));
height: 15px;
width: 20px;
position: absolute;
-webkit-transform: translate3d(12px,350px,-25px) rotateX(-90deg) skewX(20deg);
transform: translate3d(12px,350px,-25px) rotateX(-90deg) skewX(20deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
</style>
</head>
<body>
<div id='book'>
<div id='top'></div>
<div id='front'></div>
<div id='right'></div>
<div id='bottom'></div>
<div id='shadow'></div>
<div id='bookmark'>
<div>
<div>
<div>
<div></div>
</div>
</div>
</div>
</div>
<div id='bookmark-shadow'></div>
</div>
<div id='flip'>
<div id='front'>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id='back'>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h5>CSS實(shí)現(xiàn)3D翻書效果</h5>
</body>
</html>感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎么使用純CSS實(shí)現(xiàn)書籍3D翻頁(yè)效果”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
本文名稱：怎么使用純CSS實(shí)現(xiàn)書籍3D翻頁(yè)效果
網(wǎng)頁(yè)路徑：http://m.rwnh.cn/article38/jcghpp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、App開發(fā)、域名注冊(cè)、微信公眾號(hào)、網(wǎng)站維護(hù)、Google
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 企業(yè)建站遇各公司報(bào)價(jià)高低不同，該如何選擇？ 2016-11-27
- 中小企業(yè)建站前的“四疑問”應(yīng)消除 2023-03-21
- 企業(yè)建站怎樣對(duì)首頁(yè)做建設(shè) 2016-12-02
- 企業(yè)建站前有哪些準(zhǔn)備工作？ 2021-02-03
- 成都網(wǎng)站建設(shè)公司淺談企業(yè)建站的基本流程與細(xì)節(jié) 2014-11-09
- 企業(yè)建站系統(tǒng)知識(shí) 2017-12-07
- 企業(yè)建站過(guò)程中要注意的問題 2022-05-27
- 中小企業(yè)建站需要預(yù)備的材料 2020-04-12
- 企業(yè)建站如何選擇網(wǎng)站建設(shè)公司 2016-06-13
- 企業(yè)建站創(chuàng)造的價(jià)值主要體現(xiàn)在哪些方面? 2022-05-27
- 企業(yè)建站必須要了解的幾個(gè)注意事項(xiàng)！ 2022-11-29
- 企業(yè)建站是自己做還是找外包公司做? 2022-06-01