css+js实现自适应绿皮书籍书本点击翻书效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：css+js实现自适应绿皮书籍书本点击翻书效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        @import url("https://fonts.googleapis.com/css2?family=Alice&display=swap");
        :root {
          --rotate-A: 0deg;
          --rotate-B: 0deg;
          --rotate-C: 0deg;
          --translate: 50%;
          --z-index-A: 10;
          --z-index-B: 5;
          --z-index-C: 1;
          --cover-color: hsl(150deg, 100%, 15%);
          --page-first-color: hsl(36, 48%, 80%);
          --page-second-color: hsl(36, 48%, 70%);
          --page-last-color: hsl(36, 48%, 25%);
        }
        
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        .book-container {
          min-height: 100vh;
          width: 100vw;
          background: radial-gradient(circle at center, black, #1a1a1a);
          display: grid;
          place-content: center;
          overflow: hidden;
        }
        
        .book {
          position: relative;
          width: min(100vw, 1000px);
          height: min(60vw, 600px);
          perspective: min(300vw, 3000px);
        }
        
        .page-container {
          position: absolute;
          height: inherit;
          width: min(50vw, 500px);
          cursor: pointer;
          transition: 0.5s transform ease-in-out;
          transform-style: preserve-3d;
          transform-origin: left;
        }
        
        .page-A {
          transform: translate(var(--translate)) rotateY(var(--rotate-A));
          z-index: var(--z-index-A);
        }
        
        .page-B {
          transform: translate(var(--translate)) rotateY(var(--rotate-B));
          z-index: var(--z-index-B);
        }
        
        .page-C {
          transform: translate(var(--translate)) rotateY(var(--rotate-C));
          z-index: var(--z-index-C);
        }
        
        .page {
          position: absolute;
          backface-visibility: hidden;
          height: inherit;
          width: inherit;
          padding: min(10px, 1vw) min(15px, 1.5vw);
        }
        
        .front {
          border-radius: 5px 15px 15px 5px;
        }
        
        .back {
          border-radius: 15px 5px 5px 15px;
          transform: rotateY(180deg);
        }
        
        .page-A-front,
        .page-C-back {
          background: var(--cover-color);
          background-image: url("//repo.bfw.wiki/bfwrepo/icon/61a570f2a8241.png");
          background-size: contain;
          background-repeat: no-repeat;
        }
        
        .page-A-front {
          font-family: "Alice", serif;
          color: #ffcc00;
        }
        .page-A-front * {
          display: inline-block;
          position: absolute;
          text-align: center;
        }
        .page-A-front h1 {
          font-size: min(56px, 5.6vw);
          display: inline-block;
          position: absolute;
          text-align: center;
          top: 35%;
          left: 50%;
          text-shadow: 5px 2.5px 0 rgba(0, 0, 0, 0.25);
          transform: translate(-50%, -50%);
        }
        .page-A-front h2 {
          font-size: min(24px, 2.4vw);
          bottom: 10%;
          left: 50%;
          transform: translateX(-50%);
        }
        .page-A-front h3 {
          font-size: min(16px, 1.6vw);
          font-style: italic;
          top: 60%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        
        .page-A-back,
        .page-B-back {
          background: linear-gradient(90deg, var(--page-first-color) 30%, var(--page-second-color), var(--page-last-color));
        }
        
        .page-B-front,
        .page-C-front {
          background: linear-gradient(90deg, var(--page-last-color), var(--page-second-color), var(--page-first-color) 60%);
        }
        
        .page-A-back,
        .page-B,
        .page-C-front {
          line-height: min(24px, 2.4vw);
          font-size: min(16px, 1.6vw);
        }
        .page-A-back p,
        .page-B p,
        .page-C-front p {
          margin-bottom: min(5px, 0.5vw);
        }
        .page-A-back p::first-letter,
        .page-B p::first-letter,
        .page-C-front p::first-letter {
          font-size: min(24px, 2.4vw);
        }
        
        /* signature */
        .signature {
          position: absolute;
          left: 0;
          bottom: 0;
        }
        
        .link {
          position: absolute;
          z-index: 10;
          left: calc(5vmin - 1rem);
          bottom: calc(5vmin - 1rem);
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
        .link span {
          font-size: 2rem;
          font-family: arial, sans-serif;
          color: #ffcc00;
        }
        .link .my-name {
          position: relative;
        }
        .link .before,
        .link .after {
          overflow: hidden;
          width: 0px;
          transition: width 0.5s;
          transform-origin: right;
        }
        .link .before-text {
          display: inline-block;
          width: auto;
          text-align: right;
        }
        .link .after-text {
          display: flex;
          align-items: center;
          width: auto;
          height: 3rem;
          transform-origin: top center;
        }
        .link:hover .before {
          width: 3.5rem;
        }
        .link:hover .after {
          width: 5rem;
        }
        .link:hover .spin {
          display: inline-block;
          transition: 0.5s transform 0.5s ease-in-out;
          transform: rotate(360deg);
        }
        
        @media only screen and (max-width: 767px) and (orientation: portrait) {
          .book {
            width: 100vw;
            height: 50vh;
          }
        
          .page-container {
            position: absolute;
            height: inherit;
            width: 100vw;
            transform-origin: top;
          }
        
          .page-A {
            transform: translateY(calc(-50% + var(--translate))) rotateX(var(--rotate-A));
          }
        
          .page-B {
            transform: translateY(calc(-50% + var(--translate))) rotateX(var(--rotate-B));
          }
        
          .page-C {
            transform: translateY(calc(-50% + var(--translate))) rotateX(var(--rotate-C));
          }
        
          .front {
            border-radius: 5px 5px 15px 15px;
          }
        
          .back {
            border-radius: 15px 15px 5px 5px;
            transform: rotateX(180deg);
          }
        
          .page-A-front,
        .page-C-back {
            background-image: none;
          }
        
          .page-A-back,
        .page-B-back {
            background: linear-gradient(180deg, var(--page-first-color) 50%, var(--page-second-color), var(--page-last-color));
          }
        
          .page-B-front,
        .page-C-front {
            background: linear-gradient(180deg, var(--page-last-color), var(--page-second-color), var(--page-first-color) 50%);
          }
        
          .page-A-front h1 {
            font-size: 7.5vh;
          }
          .page-A-front h2 {
            font-size: 3vh;
          }
          .page-A-front h3 {
            font-size: 2vh;
          }
        
          .page-A-back,
        .page-B,
        .page-C-front {
            line-height: 2vh;
            font-size: 1.6vh;
          }
          .page-A-back p,
        .page-B p,
        .page-C-front p {
            margin-bottom: 0.5vh;
          }
          .page-A-back p::first-letter,
        .page-B p::first-letter,
        .page-C-front p::first-letter {
            font-size: 2.4vh;
          }
        }
    </style>




</head>

<body>
    <div class="book-container">
        <div class="book">

            <div class="page-container page-A">
                <div class="page front page-A-front">
                    <h1>Mrs. Dalloway</h1>
                    <h3>An Excerpt from Chapter One</h3>

                    <h2>by Virginia Woolf</h2>
                </div>
                <div class="page back page-A-back">
                    <p>Mrs. Dalloway said she would buy the flowers herself.</p>
                    <p>For Lucy had her work cut out for her. The doors would be taken off their hinges; Rumpelmayer's men were coming. And then, thought Clarissa Dalloway, what a morning--fresh as if issued to children on a beach.</p>
                    <p>What a lark! What a plunge! For so it had always seemed to her, when, with a little squeak of the hinges, which she could hear now, she had burst.........完整代码请登录后点击上方下载按钮下载查看