jquery实现古老书本书籍翻页翻书效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：jquery实现古老书本书籍翻页翻书效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link href='https://fonts.googleapis.com/css?family=Gabriela' rel='stylesheet' type='text/css'>
<style>
    *, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  }

html, body {
  height: 100%;
  }

::-webkit-scrollbar {width:12px}
::-webkit-scrollbar-thumb {background: #222;}
::-webkit-scrollbar-track {background: transparent}

::selection {
  background: #222;
  color: white;
  }
::-moz-selection {
  background: #222;
  color: white;
  }

body * {
  transform-style: preserve-3d; /* am i doing this wrong? */
  }

body {
  background: 
    radial-gradient(
      hsla(199,40%,90%,.7), 
      hsla(0,0%,100%,0)
      ) 
      no-repeat, 
    linear-gradient(
      60deg, 
      purple, 
      dodgerblue, 
      violet
      );
  color: #222;
  font-family: 'Gabriela', serif;
  perspective: 70em;/*in your face*/
	overflow-y: hidden;
  }

h1, p {
  margin: 5% 0;
  }

.book {
  height: 80%;
  max-height: 500px;
  min-height: 300px;
  width: 800px;
  background-image: 
    linear-gradient(
      90deg,
      hsla(30,40%,50%,.6),
      hsla(30,40%,20%,.9),
      hsla(30,40%,50%,.4) 90%
      ),
    url('//repo.bfw.wiki/bfwrepo/image/63759d0e24d03.png');
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  margin: auto;
  
  border: 3px solid hsla(30,10%,20%,1);
  border-radius: 5px;
  box-shadow: 0 0 150px hsla(170,0%,0%,.4);
  }

.page {
  height: 100%;
  width: 50%;
	line-height: 1.5;
  border-right: 10px solid transparent;
  position: absolute;
  top: 0; right: 0;
  transform-origin: 0 50%;
  transition: .8s;
  /*animation: unflip .3s linear;*/
  }
  [class*='side'] {
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: hsl(30,40%,70%);
    background-image: url('//repo.bfw.wiki/bfwrepo/image/63759d0e24d03.png');
    background-size: 100% 100%;
    backface-visibility: hidden;
    overflow: auto;
    padding: 5% 8%;
    }
  .side-1 {
    z-index: 2;
    box-shadow: inset 50px 0 50px rgba(0,0,0,.5);
    transition: .5s;
    }
  .side-2 {
    transform:
      rotateY(180deg);
    box-shadow: inset -50px 0 50px rgba(0,0,0,.5);
    }
  .flipped > .side-1 {
    box-shadow: inset 300px 0 50px rgba(0,0,0,.8);   
    transition: .6s;
    }
  .flipped > [class*='side'] {
    pointer-events: auto;
    }
.page:after {
  width: 100px;
  height: 50px;
  background-color: #555;
  position: absolute;
  top: 0; bottom: 0; right: -100px;
  margin: auto;
  color: white;
  text-shadow: 0 -1px 0 #222;
  line-height: 50px;
  text-align: center;
  font-family: monospace;
  content: 'next-page';
  animation: hide .8s linear;
  }
  .page.flipped:after {
    content: 'prev-page';
    transform:
      rotateY(180deg);
    pointer-events: auto;
    }
  /* to hide on flip animation */
  @keyframes hide {
    0% {opacity: 0;}
    85% {opacity: 0;}
    100% {opacity: 1;}
    }
.flipped {
  transform:
    rotateY(-180deg);
  pointer-events: none;
  /*animation: flip .3s linear;
  animation-fill-mode: forwards;*/
  }
  
.no-anim,
  .no-anim:after {
  animation: none;/* disable animation when page loads */
  }
@keyframes flip {
  to {
    transform:
      rotateY(-180deg);    
    }
  }
@keyframes unflip {
  from {
    transform:
      rotateY(-180deg);    
    }
  to {
    transform:
      rotateY(0deg);    
    }
  }
</style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <div class='book'>
        <div id='page-1' class='page no-anim'>
            <div class='side-1' id='p1'>
                <div class='content'>
                    <h1>The Pilgrim's Path</h1>
                    <p>
                        The pilgrim must visit each of the Shrines of the Seven Graces. At each site the pilgrim must stand before the three-sided stone triolith and read the inscription. To ease the pilgrim's task, the Temple has made this list of shrines along with directions
                        and advice to pilgrims. The blessings of each shrine last at least a half day.
                    </p>
                </div>
                <!-- .content -->
            </div>
            <!-- .side-1 -->
            <div class='side-2' id='p2'>
                <div class='content'>
                    <h2>The Fields of Kummu: Shrine of Humility</h2>
                    <p>
                        Here Lord Vivec met a poor farmer whose guar had died. The farmer could not harvest his muck without his guar, and he could not provide for his family or his village. So the Lord Vivec removed his fine clothes and toiled in the fields like a beast of
                        burden until the crop was harvested. It is at the Fields of Kummu we go to pray for the same humility Lord Vivec showed on that day.
                    </p>
                    <p>
                        The Fields of Kummu are west of Suran on the north shore of Lake Amaya as you head towards Pelagiad. The shrine is between two rocks, and most easily noticed while traveling east along the road. Alof's farm nearby has a small dock on the north bank of
                        Lake Amaya. This is the only dock nearby which Alof kindly allows servants of the Temple to use. It is customary to leave a portion of muck at the shrine to represent Vivec's humility.
                    </p>
                </div>
                <!-- .content -->
            </div>
            <!-- .side-2 -->
        </div>
        <!-- .page -->

        <div id='page-2' class='page no-anim'>
            <div class='side-1' id='p3'>
                <div class='content'>
                    <h2>To Stop the Moon: The Shrine of Daring</h2>
                    <p>
                        When Sheogorath rebelled against the Tribunal, he tricked the moon Baar Dau into forsaking its appointed path through Oblivion. The Mad Star inspired the moon to hurl itself upon Vivec's new city, which Sheogorath claimed was built in mockery of the heavens.
                        When Vivec learned of Sheogorath's scheme, he froze the rogue moon in the sky with a single gesture and the grace of his countenance. Overwhelmed by the courage and daring of Vivec, the moon Baar Dau swore itself to eternal service
                        of the Tribunal and all its works. Thus the moon now stands guard over the palace, and serves as a citadel for the Temple's Ordinators.
                    </p>
                    <p>
                        The Shrine of Daring is found in the city of Vivec, in the Temple District, along the western wall of the High Fane, the great Temple of Vvardenfell. When you address the shrine, it is customary to leave behind a Potion of Rising Force. Suitable potions
                        may be purchased from the Temple. Homemade potions are not acceptable.
                    </p>
                </div>
                <!-- .content -->
            </div>
            <!-- .side-1 -->
            <div class='side-2' id='p4'>
                <div class='content'>
                    <h2>The Palace: Shrine of Generosity</h2>
                    <p>
                        Long after Lord Nerevar and the Tribuna.........完整代码请登录后点击上方下载按钮下载查看