turn.js实现书本杂志翻书电子书翻页效果代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：turn.js实现书本杂志翻书电子书翻页效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

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

  
  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Fjalla+One&family=Francois+One&family=Kdam+Thmor+Pro&Martian+Mono:wght@300;700&family=Merriweather&family=Playfair+Display&family=Roboto:wght@400;700&family=Rubik:wght@400&display=swap");

body {
  overflow: hidden;
  background-color: #fcfcfc;
  margin: 0;
  padding: 0;
}

.magazine-viewport {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.magazine-viewport .container {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: auto;
}

.magazine-viewport .magazine {
  width: 922px;
  height: 600px;
  left: -461px;
  top: -300px;
}

.magazine-viewport .page {
  width: 461px;
  height: 600px;
  background-color: white;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.magazine .page {
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.magazine-viewport .page img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0;
}

.magazine-viewport .shadow {
  -webkit-transition: -webkit-box-shadow 0.5s;
  -moz-transition: -moz-box-shadow 0.5s;
  -o-transition: -webkit-box-shadow 0.5s;
  -ms-transition: -ms-box-shadow 0.5s;

  -webkit-box-shadow: 0 0 20px #ccc;
  -moz-box-shadow: 0 0 20px #ccc;
  -o-box-shadow: 0 0 20px #ccc;
  -ms-box-shadow: 0 0 20px #ccc;
  box-shadow: 0 0 20px #ccc;
}

.cover {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #c5d6f7;
}

.cover h1 {
  font-family: "Kdam Thmor Pro", sans-serif;
}

.cover h3 {
  font-style: normal;
  margin: 10px 40px;
}

.cover-text {
  position: absolute;
}

.cover img {
  position: absolute;
  width: 490px;
  left: 90px;
  top: 130px;
  z-index: 1;
}

.title-container {
  margin: 0;
  margin-top: -12px;
  height: 300px;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 20px;
}

.page-wrap {
  background-color: #f9fafe !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #111;
}

.left-page-overlay,
.right-page-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.left-page-overlay {
  background: linear-gradient(to right, #ffffff00 92%, #ccc 100%);
  border-right: solid 2.5px #bbb;
}

.right-page-overlay {
  background: linear-gradient(to left, #ffffff00 92%, #ccc 100%);
  border-left: solid 2.5px #bbb;
}

.left-page-container {
  padding: 20px 30px 20px 20px;
}

.right-page-container {
  padding: 20px 20px 20px 30px;
}

.column {
  width: 200px;
}

h1 {
  font-family: "Fjalla One", sans-serif;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 1px;

  margin-bottom: 20px;
  text-align: center;
}

h3 {
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  font-style: italic;
}

article {
  margin-top: -16px;
  background-color: #ffffff00;
  overflow: hidden;
  flex: 1;
  column-count: 2;
}

.no-cols {
  column-count: unset;
}

p {
  font-family: "Merriweather", serif;
  font-size: 10px;
  line-height: 1.6;
  margin: 0;
  text-indent: 24px;
}

.no-indent {
  text-indent: 0;
}

aside p {
  font-family: "Francois One", sans-serif;
  font-weight: bold;
  font-size: 19px;
  margin: 0;
  padding: 0 6px;
  line-height: 1.4;
  text-indent: 0;
}

.header {
  height: 20px;
}

.footer {
  height: 25px;
  background-color: #ffffff00;
}

.dropcap {
  font-family: "Playfair Display", serif;
  font-size: 80px;
  float: left;
  line-height: 1;
  margin-right: 4px;
}

.dropcap:before,
.dropcap:after {
  content: "";
  display: block;
}
.dropcap:before {
  margin-bottom: -14px;
}
.dropcap:after {
  margin-top: -4px;
}

.first-line {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  line-height: 1.5;
}

.page-num-left,
.page-num-right {
  font-family: "Roboto", sans-serif;
  font-size: 10px;
  float: right;
  margin: 0px 18px;
  font-weight: bold;
}

.title-page-num {
  position: absolute;
  color: #f9fafe;
  bottom: 6px;
  margin-bottom: 6px;
}

.page-num-left {
  float: left;
}

.page-num-right {
  float: right;
}

.quote-line {
  border-top: 0.5px solid #999;
  width: 170px;
  margin: 10px 5px;
  text-indent: 0;
}

.col1,
.col2 {
  display: table-cell;
  vertical-align: top;
  padding: 10px;
  width: 50%;
}
.col1:before,
.col2:before {
  float: right;
  width: 1px;
  height: 112px;
  content: "";
}
.col2:before {
  float: left;
}
.quote-block {
  float: right;
  clear: right;
  width: 110px;
  height: 210px;
  position: relative;
}
.quote-block img {
  position: absolute;
  left: 10px;
  top: 10px;
}
.col2 p:first-child:before {
  content: "";
  float: left;
  clear: left;
  width: 88px;
  height: 210px;
  margin: 0px 10px 10px -17.5px;
  border-radius: 0 110px 110px 0;
}

.quote-block aside {
  width: 200px;
  height: 200px;
}

.quote-block aside p {
  font-size: 18px;
}

.bottom-quote {
  position: absolute;
  bottom: 10px;
  padding-right: 65px;
}

.bottom-image {
  position: absolute;
  bottom: 70px;
  right: 15px;
  border-radius: 50px;
  z-index: 1;
}

.back-cover {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #c5d6f7;
}

.next-btn,
.prev-btn {
  background-color: #f1f1f1;
  border-radius: 50%;
  border: none;
  padding: 8px 16px;
  font-size: 21px;
}

.next-btn:hover,
.prev-btn:hover {
  background-color: #ddd;
  cursor: pointer;
}

.next-btn:focus,
.prev-btn:focus {
  outline: none;
}

.controls {
  position: fixed;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}

a:focus {
  outline: none;
}

.back-cover p {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  position: absolute;
  text-align: center;
  bottom: 50px;
  padding: 5px 50px;
  font-size: 12px;
}
</style>

  
</head>

<body>
  <div class="magazine-viewport">
  <div class="container">
    <div class="magazine">
      <!-- Cover -->
      <div style="overflow: hidden">
        <div class="cover">
          <div class="cover-text">
            <h1>ChatGPT Chronicles</h1>
            <h3> This article was written entirely by ChatGPT, and all images were generated by DALL-E 2 </h3>
          </div>
          <img title="Visualization of artificial intelligence human head on solid color background" src="//repo.bfw.wiki/bfwrepo/images/lottery/8rhVDL8.png" />
        </div>
      </div>
      <!-- Page 1 -->
      <div class="page-wrap">
        <div class="left-page-overlay"></div>
        <div class="title-container">
          <h1> The AI Revolution: Navigating the Path of Progress and Ethics </h1>
          <h3> From healthcare breakthroughs to personalized experiences, AI's potential is revolutionizing our future. </h3>
        </div>
        <div class="image-container">
          <img title="A photo of a futuristic city skyline" src="//repo.bfw.wiki/bfwrepo/images/lottery/1yz80db.png" width="470" height="400" />
        </div>
        <div class="title-page-num page-num-left">1</div>
      </div>
      <!-- Page 2 -->
      <div class="page-wrap">
        <div class="right-page-overlay"></div>
        <div class="header"></div>
        <article class="right-page-container">
          <div class="column">
            <p class="no-indent">
              <span class="dropcap">T</span>
              <span class="first-line">he dawn of the 21st century has been marked by an unprecedented technological evolution, </span>with Artificial Intelligence (AI) at the forefront of this revolution. Professor Amelia Karlsen, from the renowned Hawksmoor Institute of Technology, aptly describes this era as "the age of synthetic cognition." AI has transcended the realm of science fiction, becoming an integral part of our day-to-day lives. From autonomous vehicles to personalized digital assistants, AI technology has radically transformed traditional norms. AI's ability to learn, adapt, and improve offers a remarkable opportunity to solve complex problems and augment human capabilities. But as we continue to push the boundaries of AI, it's crucial to consider the ethical implications and strive for responsible AI innovation.
            </p>
            <p> According to Dr. Nathan Seaborne, Head of Research at Loxley AI Lab, "AI is not just a tool, it is an extension of human intellect, amplifying our capabilities to perceive, understand, and act." This profound statement encapsulates the potential of AI in our society. Not only does AI offer efficiency and automation, but it also gives us the potential to explore and understand the world in a way that was previously beyond our reach. </p>
          </div>
          <div class="column">
            <p> However, with every technology, there comes a set of challenges. AI is no exception. The adoption of AI technology presents a unique set of ethical, social, and legal challenges. These include issues related to privacy, accountability, transparency, and potential misuse of technology. </p>
            <p> One of the prime concerns is the notion of 'black box' AI, systems so complex that even their creators struggle to understand how they reach certain decisions. Such lack of transparency can lead to unforeseen consequences, especially in critical sectors like healthcare, finance, and law enforcement. </p>
            <aside>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px">
                <path d="M 16.482422 8.9921875 A 1.50015 1.50015 0 0 0 15.943359 9.1074219 C 15.943359 9.1074219 13.068414 10.279429 10.357422 13.464844 C 7.6464301 16.650259 5 21.927419 5 30 A 1.50015 1.50015 0 0 0 5.015625 30.21875 A 8.5 8.5 0 0 0 13.5 39 A 8.5 8.5 0 0 0 13.5 22 A 8.5 8.5 0 0 0 8.7089844 23.480469 C 9.5777265 19.777157 11.122152 17.196657 12.642578 15.410156 C 14.931586 12.720571 17.056641 11.892578 17.056641 11.892578 A 1.50015 1.50015 0 0 0 16.482422 8.9921875 z M 37.482422 8.9921875 A 1.50015 1.50015 0 0 0 36.943359 9.1074219 C 36.943359 9.1074219 34.068414 10.279429 31.357422 13.464844 C 28.64643 16.650259 26 21.927419 26 3.........完整代码请登录后点击上方下载按钮下载查看