div+css实现书本翻书上一页下一页效果代码
代码语言:html
所属分类:其他
代码描述:div+css实现书本翻书上一页下一页效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { min-height: 100vh; margin: 0; max-height: 100vh; overflow: hidden; background-color: #264653; } * { box-sizing: border-box; } .centered { margin: auto; width: max-content; } .flipbook { margin: 3em auto; width: 400px; height: 300px; position: relative; transform-style: preserve-3d; perspective: 1000px; } .flipbook .leaf { position: absolute; transform-style: preserve-3d; height: 100%; width: 50%; background-color: #fff; left: 50%; transition: transform 1s; transform: rotate3d(0, 1, 0, 0deg); transform-origin: left 0px; } .flipbook .leaf .page { transform-style: preserve-3d; position: absolute; width: 100%; height: 100%; top: 0; } .flipbook .leaf .page.front { transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0.1px); } .flipbook .leaf .page.front:not(.external) { box-shadow: inset 5px 0px 5px -5px #0005; } .flipbook .leaf .page.back { transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, 0.1px); } .flipbook .leaf .page.back:not(.external) { box-shadow: inset -5px 0px 5px -5px #0005; } .disabled { user-select: none; opacity: 0.6; } .title { text-align: center; width: 100%; padding: 0em !important; padding-top: 2em; } .page { padding: 1em; } .page.front { border-radius: 0em 1em 1em 0; } .page.back { border-radius: 1em 0em 0em 1em; } .leaf { background-color: #0000 !important; } .pageNumber { font-size: 0.75em; position: absolute; bottom: 0.5em; } .front .pageNumber { right: 0.75em; } .back .pageNumber { left: 0.75em; } .contents-row { display: flex; flex-flow: row nowrap; } .contents-row .spacer { flex: 1 1; height: 1em; border-bottom: 1px dashed #000; } .contents-row .text { flex: 0 0 auto; } h1, h2, h3 { font-family: cursive; } body[onload] { /*Cheesing the preview*/ transform: scale(1.5); transform-origin: center top; } body[onload] .leaf:nth-child(1) { transform: rotate3d(0, 1, 0, -128deg) !important; } body[onload] .leaf:nth-child(2) { transform: rotate3d(0, 1, 0, -70deg) !important; } body[onload] .leaf:nth-child(3) { transform: rotate3d(0, 1, 0, -40deg) !important; } body[onload] div.leaf:nth-child(4) > div:nth-child(1) { background-color: #e76f51; } </style> </head> <body translate="no"> <div class="flipbook centered" id="flipbook"> <div class="leaf"> <div class="page front title external" style="background-color:#e76f51;"> <h1>Flip Book</h1> <em>A lil dive into 3d css</em> </div> <div class="page back" style="background-color:#2a9d8f;"> <div class="pageNumber">i</div> <img src="//repo.bfw.wiki/random/200x300/景色" alt="" style="width:100%"> </div> </div> <div class="leaf"> <div class="page front" style="background-color:#2a9d8f;"> <div class="pageNumber">ii</div> <h2>Contents</h2> <div class="contents-row"> <div class="text">Cat Ipsum</div> <div class="spacer"></div> <div class="text">1</div> </div> <div class="contents-row"> <div class="text">Lorum Ipsum</div> <div class="spacer"></div> <div class="text">3</div> </div> </div> <div class="page back" style="background-color:#e9c46a;"> <div class="pageN.........完整代码请登录后点击上方下载按钮下载查看
网友评论0