jquery实现三维书本翻页交互动画效果代码
代码语言:html
所属分类:动画
代码描述:jquery实现三维书本翻页交互动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D Book Showcase</title> <style> /* General Demo Style */ @font-face { font-family: 'the_godfatherregular'; src: url('../fonts/thegodfather-v2-webfont.eot'); src: url('../fonts/thegodfather-v2-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/thegodfather-v2-webfont.woff') format('woff'), url('../fonts/thegodfather-v2-webfont.ttf') format('truetype'), url('../fonts/thegodfather-v2-webfont.svg#the_godfatherregular') format('svg'); font-weight: normal; font-style: normal; } html { height: 100%; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; } /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } body { font-family: 'Lato', Calibri, Arial, sans-serif; background: #f6f6f6; font-weight: 400; font-size: 15px; color: #333; overflow: scroll; overflow-x: hidden; } .demo-2 body { background: url(../images/wood.jpg); } a { color: #555; text-decoration: none; } .container { width: 100%; position: relative; } .main, .container > header { width: 90%; max-width: 1060px; margin: 0 auto; position: relative; padding: 0 30px 50px 30px; } .container > header { padding: 30px 30px 40px 30px; } .container > header h1 { font-size: 34px; line-height: 38px; margin: 0; font-weight: 700; color: #333; float: left; } /* Header Style */ .codrops-top { line-height: 24px; font-size: 11px; background: #fff; background: rgba(255, 255, 255, 0.5); text-transform: uppercase; z-index: 9999; position: relative; box-shadow: 1px 0px 2px rgba(0,0,0,0.2); } .codrops-top a { padding: 0px 10px; letter-spacing: 1px; color: #333; display: inline-block; } .codrops-top a:hover { background: rgba(255,255,255,0.8); color: #000; } .codrops-top span.right { float: right; } .codrops-top span.right a { float: left; display: block; } /* Demo Buttons Style */ .codrops-demos { float: right; } .codrops-demos a { display: inline-block; margin: 10px; color: #666; font-weight: 700; line-height: 30px; border-bottom: 4px solid transparent; } .codrops-demos a:hover { color: #000; border-color: #000; } .codrops-demos a.current-demo, .codrops-demos a.current-demo:hover { color: #aaa; border-color: #aaa; } .support-note { color: #d7823e; font-size: 16px; display: block; font-weight: bold; text-align: center; padding: 5px 0; text-align: left; clear: both; } .bookshelf { width: 100%; height: 63px; z-index: -1; margin-top: -25px; background: transparent url(../images/shelf.png) no-repeat center center; position: relative; } .bk-list { list-style: none; position: relative; } .bk-list li { position: relative; width: 300px; float: left; z-index: 1; margin: 0px 50px 40px 0; -webkit-perspective: 1800px; -moz-perspective: 1800px; perspective: 1800px; } .bk-list li:last-child { margin-right: 0; } .bk-info { position: relative; margin-top: 440px; } .bk-info h3 { padding: 25px 0 10px; margin-bottom: 20px; border-bottom: 1px solid rgba(0,0,0,0.3); font-size: 26px; } .bk-info h3 span:first-child { font-size: 14px; font-weight: 400; text-transform: uppercase; padding-bottom: 5px; display: block; color: #777; } .bk-info p { line-height: 24px; color: #444; min-height: 160px; } .bk-info button { background: #FC756F; border: none; color: #fff; display: inline-block; padding: 3px 15px; font-weight: 700; font-size: 14px; text-transform: uppercase; cursor: pointer; margin-right: 4px; box-shadow: 1px 1px 1px rgba(0,0,0,0.15); } .bk-info button.bk-active, .bk-info button:active { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 1px rgba(0,0,0,0.2); } .no-touch .bk-info button:hover, .bk-info button.bk-active { background: #d0544e; } .bk-list li .bk-book { position: absolute; width: 100%; height: 400px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: -webkit-transform .5s; -moz-transition: -moz-transform .5s; transition: transform .5s; } .bk-list li .bk-book.bk-bookdefault:hover { -webkit-transform: rotate3d(0,1,0,35deg); -moz-transform: rotate3d(0,1,0,35deg); transform: rotate3d(0,1,0,35deg); } .bk-list li .bk-book > div, .bk-list li .bk-front > div { display: block; position: absolute; } .bk-list li .bk-front { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transition: -webkit-transform .5s; -moz-transition: -moz-transform .5s; transition: transform .5s; -webkit-transform: translate3d(0,0,20px); -moz-transform: translate3d(0,0,20px); transform: translate3d(0,0,20px); z-index: 10; } .bk-list li .bk-front > div { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .bk-list li .bk-page { -webkit-transform: translate3d(0,0,19px); -moz-transform: translate3d(0,0,19px); transform: translate3d(0,0,19px); display: none; width: 295px; height: 390px; top: 5px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; z-index: 9; } .bk-list li .bk-front, .bk-list li .bk-back, .bk-list li .bk-front > div { width: 300px; height: 400px; } .bk-list li .bk-left, .bk-list li .bk-right { width: 40px; left: -20px; } .bk-list li .bk-top, .bk-list li .bk-bottom { width: 295px; height: 40px; top: -15px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .bk-list li .bk-back { -webkit-transform: rotate3d(0,1,0,-180deg) translate3d(0,0,20px); -moz-transform: rotate3d(0,1,0,-180deg) translate3d(0,0,20px); transform: rotate3d(0,1,0,-180deg) translate3d(0,0,20px); box-shadow: 10px 10px 30px rgba(0,0,0,0.3); border-radius: 3px 0 0 3px; } .bk-list li .bk-cover-back { background-color: #000; -webkit-transform: rotate3d(0,1,0,-180deg); -moz-transform: rotate3d(0,1,0,-180deg); transform: rotate3d(0,1,0,-180deg); } .bk-list li .bk-right { height: 390px; top: 5px; -webkit-transform: rotate3d(0,1,0,90deg) translate3d(0,0,295px); -moz-transform: rotate3d(0,1,0,90deg) translate3d(0,0,295px); transform: rotate3d(0,1,0,90deg) translate3d(0,0,295px); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .bk-list li .bk-left { height: 400px; -webkit-transform: rotate3d(0,1,0,-90deg); -moz-transform: rotate3d(0,1,0,-90deg); transform: rotate3d(0,1,0,-90deg); } .bk-list li .bk-top { -webkit-transform: rotate3d(1,0,0,90deg); -moz-transform: rotate3d(1,0,0,90deg); transform: rotate3d(1,0,0,90deg); } .bk-list li .bk-bottom { -webkit-transform: rotate3d(1,0,0,-90deg) translate3d(0,0,390px); -moz-transform: rotate3d(1,0,0,-90deg) translate3d(0,0,390px); transform: rotate3d(1,0,0,-90deg) translate3d(0,0,390px); } /* Transform classes */ .bk-list li .bk-viewinside .bk-front { -webkit-transform: translate3d(0,0,20px) rotate3d(0,1,0,-160deg); -moz-transform: translate3d(0,0,20px) rotate3d(0,1,0,-160deg); transform: translate3d(0,0,20px) rotate3d(0,1,0,-160deg); } .bk-list li .bk-book.bk-viewinside { -webkit-transform: translate3d(0,0,150px) rotate3d(0,1,0,0deg); -moz-transform: translate3d(0,0,150px) rotate3d(0,1,0,0deg); transform: translate3d(0,0,150px) rotate3d(0,1,0,0deg); } .bk-list li .bk-book.bk-viewback { -webkit-transform: translate3d(0,0,0px) rotate3d(0,1,0,180deg); -moz-transform: translate3d(0,0,0px) rotate3d(0,1,0,180deg); transform: translate3d(0,0,0px) rotate3d(0,1,0,180deg); } .bk-list li .bk-viewback .bk-back { z-index: 10; } /* Main colors and content */ .bk-list li .bk-page, .bk-list li .bk-right, .bk-list li .bk-top, .bk-list li .bk-bottom { background-color: #fff; } .bk-list li .bk-front > div { border-radius: 0 3px 3px 0; box-shadow: inset 4px 0 10px rgba(0, 0, 0, 0.1); } .bk-list li .bk-front:after { content: ''; position: absolute; top: 1px; bottom: 1px; left: -1px; width: 1px; } .bk-list li .bk-cover:after, .bk-list li .bk-back:after { content: ''; position: absolute; top: 0; left: 10px; bottom: 0; width: 3px; background: rgba(0,0,0,0.06); box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1); } .bk-list li .bk-back:after { left: auto; right: 10px; } .bk-left h2 { width: 400px; height: 40px; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotate(90deg) translateY(-40px); -moz-transform: rotate(90deg) translateY(-40px); transform: rotate(90deg) translateY(-40px); } .bk-content { position: absolute; top: 30px; left: 20px; bottom: 20px; right: 20px; padding: 30px; overflow: hidden; background: #fff; opacity: 0; pointer-events: none; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; cursor: default; } .bk-content-current { opacity: 1; pointer-events: auto; } .bk-content p { padding: 0 0 10px; -webkit-font-smoothing: antialiased; color: #000; font-size: 13px; line-height: 20px; text-align: justify; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .bk-page nav { display: block; text-align: center; margin-top: 20px; position: relative; z-index: 100; cursor: pointer; } .bk-page nav span { display: inline-block; width: 20px; height: 20px; color: #aaa; background: #f0f0f0; border-radius: 50%; } /* Individual style & artwork */ /* Book 1 */ .book-1 .bk-front > div, .book-1 .bk-back, .book-1 .bk-left, .book-1 .bk-front:after { background-color: #ff924a; } .book-1 .bk-cover { background-image: url(//repo.bfw.wiki/bfwrepo/image/5e32405c2040e.png); background-repeat: no-repeat; background-position: 10px 40px; } .book-1 .bk-cover h2 { position: absolute; bottom: 0; right: 0; left: 0; padding: 30px; background: rgba(255,255,255,0.2); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.1); } .book-1 .bk-cover h2 span:first-child, .book-1 .bk-left h2 span:first-child { text-transform: uppercase; font-weight: 400; font-size: 13px; padding-right: 20px; } .book-1 .bk-cover h2 span:first-child { display: block; } .book-1 .bk-cover h2 span:last-child, .book-1 .bk-left h2 span:last-child { font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif; } .book-1 .bk-content p { font-family: Georgia, Times, "Times New Roman", serif; } .book-1 .bk-left h2 { color: #fff; font-size: 15px; line-height: 40px; padding-right: 10px; text-align: right; } .book-1 .bk-back p { color: #fff; font-size: 13px; padding: 40px; text-align: center; font-weight: 700; } /* Book 2 */ .book-2 .bk-front > div, .book-2 .bk-back, .book-2 .bk-left, .book-2 .bk-front:after { background-color: #222; } .book-2 .bk-cover { background-image: url(//repo.bfw.wiki/bfwrepo/image/5e32407d9bd1a.png); background-repeat: no-repeat; background-position: 98% 0%; } .book-2 .bk-cover h2, .book-2 .bk-left h2 { color: #fff; font-family: 'the_godfatherregular', Georgia, serif; font-weight: 400; } .book-2 .bk-cover h2 { font-size: 138px; line-height: 102px; padding: 30px; } .book-2 .bk-cover h2 span:first-child { position: relative; display: block; } .book-2 .bk-cover h2 span:first-child:before { content: 'A novel'; font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif; text-transform: uppercase; position: absolute; color: red; font-size: 20px; right: -15px; bottom: -60px; } .book-2 .bk-cover h2 span:last-child { font-size: 100px; line-height: 80px; display: block; position: relative; } .book-2 .bk-cover h2 span:last-child:before { content: 'by'; font-size: 16px; color: red; position: absolute; top: -32px; left: 62px; font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif; } .book-2 .bk-cover h2 span:last-child:after { content: ''; width: 20px; height: 20px; border-radius: 50%; background: #f9ed65; position: absolute; top: 5px; left: 101px; } .book-2 .bk-left h2 { font-size: 20px; line-height: 40px; padding-right: 10px; text-align: right; } .book-2 .bk-back p { color: red; font-size: 13px; font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif; padding: 40px; text-align: center; } /* Book 3 */ .book-3 .bk-front > div, .book-3 .bk-back, .book-3 .bk-left, .book-3 .bk-front:after { background-color: #a4c19e; } .book-3 .bk-cover .........完整代码请登录后点击上方下载按钮下载查看
网友评论0