page-flip+bootstrap实现自适应翻书翻页效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：page-flip+bootstrap实现自适应翻书翻页效果代码

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<style>
  .wrapper { margin: 150px auto; }
  .flip-book {
   box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
   display: none;
   background-size: cover;
}
 .page {
   padding: 20px;
   background-color: #fdfaf7;
   color: #785e3a;
   border: solid 1px #c2b5a3;
   overflow: hidden;
}
 .page .page-content {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: stretch;
}
 .page .page-content .page-header {
   height: 30px;
   font-size: 100%;
   text-transform: uppercase;
   text-align: center;
}
 .page .page-content .page-image {
   height: 100%;
   background-size: contain;
   background-position: center center;
   background-repeat: no-repeat;
}
 .page .page-content .page-text {
   height: 100%;
   flex-grow: 1;
   font-size: 80%;
   text-align: justify;
   margin-top: 10px;
   padding-top: 10px;
   box-sizing: border-box;
   border-top: solid 1px #f4e8d7;
}
 .page .page-content .page-footer {
   height: 30px;
   border-top: solid 1px #f4e8d7;
   font-size: 80%;
   color: #998466;
}
 .page.--left {
   border-right: 0;
   box-shadow: inset -7px 0 30px -7px rgba(0, 0, 0, 0.4);
}
 .page.--right {
   border-left: 0;
   box-shadow: inset 7px 0 30px -7px rgba(0, 0, 0, 0.4);
}
 .page.--right .page-footer {
   text-align: right;
}
 .page.hard {
   background-color: #f2e8d9;
   border: solid 1px #998466;
}
 .page.page-cover {
   background-color: #e3d0b5;
   color: #785e3a;
   border: solid 1px #998466;
}
 .page.page-cover h2 {
   text-align: center;
   padding-top: 50%;
   font-size: 210%;
}
 .page.page-cover.page-cover-top {
   box-shadow: inset 0px 0 30px 0px rgba(36, 10, 3, 0.5), -2px 0 5px 2px rgba(0, 0, 0, 0.4);
}
 .page.page-cover.page-cover-bottom {
   box-shadow: inset 0px 0 30px 0px rgba(36, 10, 3, 0.5), 10px 0 8px 0px rgba(0, 0, 0, 0.4);
}

 </style>
</head>

<body>
     
  <div class="wrapper">

  <div class="container">
   
    <div>
        <button type="button" class="btn-prev btn btn-primary">Previous page</button>
        <span class="page-current">1</span> of <span class="page-total">-</span>
        <button type="button" class="btn-next btn btn-primary">Next page</button>
    </div>

    <div class="alert alert-danger mt-3 mb-3">
        State: <i class="page-state">read</i>, orientation: <i class="page-orientation">landscape</i>
    </div>
</div>

<div class="container">
    <div class="flip-book" id="demoBookExample">
        <div class="page page-cover page-cover-top" data-density="hard">
            <div class="page-content">
                <h2>BOOK TITLE</h2>
            </div>
        </div>
        <div class="page">
            <div class="page-content">
                <h2 class="page-header">Page header 1</h2>
                <div class="page-image" style="background-image: url(//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png)"></div>
                <div class="page-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit viverra metus, a venenatis tellus tellus id magna. Aliquam ac nulla rhoncus, accumsan eros sed, viverra enim. Pellentesque non justo vel nibh sollicitudin pharetra suscipit ut ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit viverra metus, a venenatis tellus tellus id magna.</div>
                <div class="page-footer">2</div>
            </div>
        </div>
        <!-- PAGES .... -->
        <div class="page">.........完整代码请登录后点击上方下载按钮下载查看