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