div+css实现逼真三维书本翻页翻书效果代码
代码语言:html
所属分类:其他
代码描述:div+css实现逼真三维书本翻页翻书效果代码,点击页面可翻页翻书,包含书本封面与底部。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Pixelify+Sans&family=Poppins'> <style> * { box-sizing: border-box; } /* FlipBook */ body { /* or any other parent wrapper */ margin: 0; display: flex; min-height: 100dvh; perspective: 1000px; font: 1em/1.4 "Poppins", sans-serif; overflow: hidden; color: hsl(180 68% 5%); background-image: radial-gradient(circle farthest-corner at 50% 50%, hsl(187 20% 88%) 30%, hsl(149 20% 94%) 100%); } .book { position: relative; display: flex; margin: auto; width: 40cqmin; /*1* let pointer event go trough pages of lower Z than .book */ pointer-events: none; transform-style: preserve-3d; transition: translate 1s; translate: calc(min(var(--c), 1) * 50%) 0%; /* Incline on the X axis for pages preview */ rotate: 1 0 0 30deg; } .page { /* PS: Don't go below thickness 0.5 or the pages might transpare */ --thickness: 4; flex: none; display: flex; width: 100%; font-size: 2cqmin; /*1* allow pointer events on pages */ pointer-events: all; user-select: none; transform-style: preserve-3d; transform-origin: left center; transition: transform 1s, rotate 1s ease-in calc((min(var(--i), var(--c)) - max(var(--i), var(--c))) * 50ms); translate: calc(var(--i) * -100%) 0px 0px; transform: translateZ( calc((var(--c) - var(--i) - 0.5) * calc(var(--thickness) * .23cqmin))); rotate: 0 1 0 calc(clamp(0, var(--c) - var(--i), 1) * -180deg); } .front, .back { position: relative; flex: none; width: 100%; backface-visibility: hidden; overflow: hidden; background-color: #fff; /* Fix backface visibility Firefox: */ translate: 0px; } .back { translate: -100% 0; rotate: 0 1 0 180deg; } /* That's it. Your FlipBook customization styles: */ .book { counter-reset: page -1; & a { color: inherit; } } .page { box-shadow: 0em .5em 1em -.2em #00000020; } .front, .back { display: flex; flex-flow: column wrap; justify-content: space-between; padding: 2em; border: 1px solid #0002; &:has(img) { padding: 0; } & img { width: 100%; height: 100%; object-fit: cover; } &::after { position: absolute; bottom: 1em; counter-increment: page; content: counter(page) "."; font-size: 0.8em; } } .cover { &::after { content: ""; } } .front { &::after { right: 1em; } background: linear-gradient(to left, #f7f7f7 80%, #eee 100%); border-radius: .1em .5em .5em .1em; } .back { &::after { left: 1em; } background-image: linear-gradient(to right, #f7f7f7 80%, #eee 100%); border-radius: .5em .1em .1em .5em; } .cover { background: radial-gradient(circle farthest-corner at 80% 20%, hsl(150 80% 20% / .3) 0%, hsl(170 60% 10% / .1) 100%), hsl(231, 32%, 29%) url("//repo.bfw.wiki/bfwrepo/image/65f67ee3d816a.png") 50% / cover; color: hsl(200 30% 98%); } </style> </head> <body translate="no"> <div class="book"> <div class="page"> <div class="front cover"> <h1>FlipBook</h1> <p>2024.<br>Second edition</p> </div> <div class="back"> <h2>Responsive</h2> <p>Fully responsive CSS flip book, thanks to the <code>cqmin</code> unit.</p> </div> </div> <div class="pag.........完整代码请登录后点击上方下载按钮下载查看
网友评论0