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