css+js实现螺旋书本封面效果代码-html代码-BFW代码库

css+js实现螺旋书本封面效果代码

代码语言：html

代码描述：css+js实现螺旋书本封面效果代码

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

<!DOCTYPE html>
<html lang="en" >

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

  
  
<style>
:root {
     --offsetX: 8px;
     --bg: rgb(226, 223, 220);
}
body {
     background-color: var(--bg);
}

.container {
     top: 10vh;
     left: 50vw;
     width: 400px;
     height: 80vh;
     position: absolute;

     overflow: visible hidden; /* this cuts x-axis as well, but why??? */
     padding-left: var(--offsetX);
     transform: translateX(-50%);
     box-shadow: 15px 15px 10px rgba(0, 0, 0, 0.2);
}
.cover {
     background-image: url("//repo.bfw.wiki/bfwrepo/image/649d3cf9c3795.png");
     background-size: cover;
     background-position: center;
}
.page {
     width: 100%;
     height: 100%;
     backgrouncolor: grey;
}
#cover-stripe {
     position: absolute;
     left: 0;
     height: 100%;
     width: var(--offsetX);
     background-color: var(--bg);
}
.label {
     position: absolute;
     top: 20%;
     left: 20%;
     background: white;
     color: purple;
     font-family: "Indie Flower", cursive;
     font-size: 2em;
     padding: 20px;
     width: fit-content;
     border-radius: 10px;
     border: 5px outset purple;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
     transform: translate(0, -50%);
}

.cutouts {
     top: 0;
     position: absolute;
     height: 100%;
}
.rectangle {
     position: absolute;
     left: 20px;
     width: 20px;
     height: 20px;
     background-color: rgba(255, 255, 255, 0.5);
     backdrop-filter: blur(5px); /* Apply a blur effect */
     box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4);
}
.rectangle:nth-child(1) {
}

.side-rect {
     position: absolute;
     top: 0;
     left: var(--offsetX);
     width: 20px;
     height: 100%;
     background-color: rgba(255, 255, 255, 0.5);
     backdrop-filter: blur(5px); /* Apply a blur effect */
}

.right {
     left: calc(40px + var(--offsetX));
     width: 80px;
     box-shadow: 4px 0 3px rgba(0, 0, 0, 0.5);
}
.spiral {
     position: absolute;
     background: purple;
     left: calc(-1 * var(--offsetX));
     width: 33px;
     height: 6px;
     border-radius: 3px;
     transform: rotate(-10deg);

     box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.8);
}
/* TEST */
</style>


  
</head>

<body translate="no">
  <div class="wrapper">
     <div class="container">
          <div class="page cover"></div>
          <div class="page"></div>
          <div class="page"></div>
          <div class="page"></div>
          <div class="page"></div>
          <div class="page"></div>
          <div class="page"></div>
          <div class="page"></div>
          <div id="cover-stripe"></div>
          <div c.........完整代码请登录后点击上方下载按钮下载查看