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>
                 .........完整代码请登录后点击上方下载按钮下载查看