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

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

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