js+css实现逼真可翻页的书籍代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js+css实现逼真可翻页的书籍代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <style>
        /* Bound View · a book-shaped UI proof of concept */

:root{
  --paper-1:   #efe4c9;
  --paper-2:   #e6d5ab;
  --paper-3:   #d9c493;
  --ink:       #3a2c1c;
  --ink-soft:  #6a5638;
  --oxblood:   #8a3324;
  --oxblood-d: #6e2418;
  --brass:     #b28b4c;
  --brass-d:   #8f6c32;
  --gold:      #d8b36a;
  --olive:     #5f6238;
  --leather-1: #6e3a2a;
  --leather-2: #4c241a;
  --leather-3: #37170f;
  --line:      rgba(58,44,28,.28);
  --line-soft: rgba(58,44,28,.16);

  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --mono:  ui-monospace, 'Courier New', 'Courier', monospace;
  --radius: 3px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--serif);
  color:var(--ink);
  background:
    radial-gradient(120% 90% at 50% 0%, #4a3a2a 0%, #34281c 55%, #241b12 100%);
  min-height:100dvh;
  display:flex; flex-direction:column; align-items:center;
  padding:22px 14px 44px; gap:20px;
  -webkit-font-smoothing:antialiased;
}

/* ───────── Toolbar (always crisp) ─────────
   Brand on its own line; both sliders share one row at equal height. */
.toolbar{
  width:min(760px,100%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:12px 16px; color:#f0e6cf;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.12));
  border:1px solid rgba(240,230,207,.18); border-radius:8px;
  backdrop-filter:blur(2px);
}
.toolbar .brand{
  font-size:.82rem; letter-spacing:.22em; text-transform:uppercase;
  color:#d9c493;
}
.toolbar .brand b{ color:#f3ead4; font-weight:600; letter-spacing:.14em; }
.controls{
  display:flex; align-items:center; justify-content:center;
  column-gap:36px; row-gap:12px; flex-wrap:wrap;
}
.ctl{ display:flex; align-items:center; gap:10px; font-size:.9rem; }
.ctl label{ color:#e9ddc2; }

input[type=range].range{
  -webkit-appearance:none; appearance:none;
  width:120px; height:4px; border-radius:3px; background:#5a472f; cursor:pointer;
}
input[type=range].range::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:#e9ddc2; border:2px solid var(--brass-d); cursor:pointer;
}
input[type=range].range::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:#e9ddc2; border:2px solid var(--brass-d); cursor:pointer;
}
.ctl .val{ font-family:var(--mono); font-size:.8rem; color:#d9c493; min-width:4.2ch; text-align:right; }

/* ───────── Stage ───────── */
.stage{
  width:min(880px,100%);
  display:flex; justify-content:center;
  filter:drop-shadow(0 30px 45px rgba(0,0,0,.5));
  margin-top:6px;
}
.warp{
  perspective:2400px;
  width:100%;
  aspect-ratio:16 / 11;
  max-height:72dvh;
}
.warp.curved{ filter:url(#book-curve); }

.book{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transform:translateX(0) rotateY(0deg);
  transition:transform .95s cubic-bezier(.6,.05,.3,1);
  --tL:0px;
  --tR:24px;
}
.book.closed-front{ transform:translateX(-25%) rotateY(20deg); }
.book.closed-back { transform:translateX(25%)  rotateY(-20deg); }

#leaves{ position:absolute; inset:0; transform-style:preserve-3d; }

/* ───────── Leaves ───────── */
.paper{
  position:absolute; top:0; left:50%; width:50%; height:100%;
  transform-origin:left center;
  transform-style:preserve-3d;
  transform:rotateY(0deg) translateZ(var(--tz,0px));
  transition:transform .85s cubic-bezier(.5,.05,.25,1);
}
.paper.flipped{ transform:rotateY(-180deg) translateZ(var(--tz,0px)); }

.face{
  position:absolute; inset:0;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  overflow:hidden;
}
/* Gutter shade + light band: paper lifting out of the valley */
.face.front{
  border-radius:2px 6px 6px 2px;
  background:linear-gradient(90deg,
    #b39a69 0%, #d3bd8d 2%, #f4ecd8 6.5%, #e6d7b4 11%,
    var(--paper-1) 20%, var(--paper-1) 100%);
  box-shadow:inset 14px 0 22px -14px rgba(58,44,28,.5);
}
.face.back{
  transform:rotateY(180deg);
  border-radius:6px 2px 2px 6px;
  background:linear-gradient(270deg,
    #b39a69 0%, #d3bd8d 2%, #f4ecd8 6.5%, #e6d7b4 11%,
    var(--paper-1) 20%, var(--paper-1) 100%);
  box-shadow:inset -14px 0 22px -14px rgba(58,44,28,.5);
}
.paper.cover .face.front{ border-radius:4px 10px 10px 4px; }
.paper.cover .face.back { border-radius:10px 4px 4px 10px; }

.face::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,0) 40%);
  opacity:0; transition:opacity .85s;
}
.face.back::after{ background:linear-gradient(270deg, rgba(0,0,0,.22), rgba(0,0,0,0) 40%); }
.paper.turning .face::after{ opacity:1; }

/* Center channel: soft valley (open book only) */
.gutter{
  position:absolute; top:0; left:calc(50% - 26px); width:52px; height:100%;
  background:linear-gradient(90deg,
    transparent, rgba(58,44,28,.28) 34%, rgba(38,28,18,.52) 50%,
    rgba(58,44,28,.28) 66%, transparent);
  pointer-eve.........完整代码请登录后点击上方下载按钮下载查看