黑书也化个妆

马黑黑 发表于 2022-4-29 10:36

本帖最后由马黑黑于 2022-4-29 10:42 编辑 <br /><br /><style>
.book {
left: -214px;
display: flex;
align-items: center;
width: 1024px;
height: 700px;
perspective: 1800px;
cursor: pointer;
padding: 10px;
position: relative;
}
.page {
padding: 20px;
width: 478px;
height: 670px;
left: 50%;
transform-origin: left;
background-color: rgba(243,226,199,1);
background: linear-gradient(to right, rgba(193,158,103,1) 0%, rgba(182,141,76,1) 1%, rgba(233,212,179,1) 100%);
box-shadow: inset -10px -3px 6px rgba(243,226,199,1), 1px 1px 20px rgba(0,0,0,.15);
transform-style: preserve-3d;
position: absolute;
}

.page div { width: 100%; height: 100%; }
.page div:nth-child(1) { }
.page div:nth-child(2) { display: none; }

@keyframes rot1{
from { transform: rotateY(0deg); }
to { transform: rotateY(-180deg); }
}
@keyframes rot2{
from { transform: rotateY(-180deg); }
to { transform: rotateY(0deg); }
}
.page p { margin: 0; padding: 4px 0; }
.page img { width: 100%; height: 100%; }
h2 { font: bold 1.3em sans-serif; padding: 8px 0; margin: 0; }
.rnum { position: absolute; bottom: 4px; right: 10px; color: #777; font-size: 10px; }
.lnum { position: absolute; bottom: -16px; left: -6px; color: #777; font-size: 10px; }
.tit { font: bold 3em /3.5em sans-serif;color:#e6e6e6;text-shadow: 1px 1px 2px gray; }
.vtc { writing-mode: vertical-rl; }
.mid { text-align: center; }
.right { text-align: right; }
.redcolor { color: red; }
</style>

<div class="book">
<div class="page">
<div>
<p class="rnum">All in here</p>
<p class="right" style="color: #777;">馬<br>黑<br>黑</p>
<p class="tit vtc">書中自有黃金屋</p>
</div>
<div>
<p class="lnum">Never settle</p>
<h2>HTML文档结构</h2>
<pre style="font-size: 0.9em;line-height:14px;">
<div class="book">
<div class="page">
<div>
<span class="redcolor">封面</span>
</div>
<div>
<span class="redcolor">扉页</span>
</div>
</div>
<div class="page">
<div>
<span class="redcolor">第一页</span>
</div>
<div>
<span class="redcolor">第二页</span>
</div>
</div>
<div class="page">
<div>
<span class="redcolor">第三页</span>
</div>
<div>
<span class="redcolor">第四页</span>
</div>
</div>
<div class="page">
<div>
<span class="redcolor">内封</span>
</div>
<div>
<span class="redcolor">封底</span>
</div>
</div>
</div>
</pre>
<p>红色部分是放置书本内容的地方，支持HTML代码，可以是文本，可以是图片，甚至可以是媒体。建议使用规范的HTML代码发布帖子内容，可以将组织好的代码替换红色部分。</p>
<p>红色之外的代码结构不可破坏，否则黑书会死翘翘！</p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">1</p>
<h2>关于书本页码</h2>
<p>本示范每一页都标有页码，封面、扉页、内封与封底也有相应的文本标识，都是页码范畴。这些页码标识，通过HTML+CSS实现，HTML代码只需通过class引用CSS样式便可。</p>
<p>单数页码对应于如下代码中的第一页所在的盒子即第一组 div，双数页码对应于第二页所在的盒子即第二组 div：</p>
<pre style="font-size: 1em;">
<div><span class="redcolor">第一页</span><div>
<div><span class="redcolor">第二页</span><div>
</pre>
<p>那么，单页页码用以下语句插入：<span class="redcolor"><p class="rnum">1</p></span></p>
<p>那么，双页页码则用：<span class="redcolor"><p class="lnum">2</p></span></p>
<p>可以看出来：rnum 是 right number 即右侧页码的意思，lnum 则是 left number 即左侧页码。.rnum 和 .lnum 已在CSS里设定为绝对定位，因此只要放在对应的所在页的div之内便可，无需考虑它在代码流中的具体位置。举例如下：</p>
<pre style="font-size: 1em;">
<div>
<p><span class="redcolor">第一页的内容</span></p>
><p class="rnum">1</p>
<div>
<div>
><p class="rnum">2</p>
<p><span class="redcolor">第二页的内容</span></p>
<div>
</pre>
<p>封面、内封可视为单数页码，也可以根据需要选用。</p>
</div>
<div>
<p class="lnum">2</p>
<p>第二頁</p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">3</p>
<p>第三頁</p>
</div>
<div>
<p class="lnum">4</p>
<p>第四頁</p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">-End-</p>
<p>內封</p>
</div>
<div>
<p class="rnum">花潮出版社出版<br>正版書籍: ￥99.99</p>
<p>封底</p>
</div>
</div>
</div>
<script>
let page = document.querySelectorAll(".page");
let idx = 0;
let all = page.length;
let currentPage = 0;

setzIdx();

document.querySelector(".book").onclick = function(){
if(idx == 0){ //前翻
page.style.animation = "rot1 .5s linear forwards";
page.children.style.display = "none";
page.children.style.display = "block";
page.children.style.transform = "rotateY(-180deg)";
currentPage ++;
if(currentPage == all){
idx = 1;
currentPage = all - 1;
}
} else { //后翻
page.style.animation = "rot2 .5s linear forwards";
page.children.style.display = "none";
page.children.style.display = "block";
page.children.style.transform = "rotateY(360deg)";
currentPage --;
if(currentPage < 0){
idx = 0;
currentPage = 0;
}
}
setzIdx();
}

function setzIdx(){
for(j=0; j<all; j++){
page.style.zIndex = j >= currentPage ? page.style.zIndex = all - j : page.style.zIndex = j + 1;
}
if(page.style.zIndex <= all) page.style.zIndex = all;
}
</script>

东篱闲人 发表于 2022-4-29 10:37

书下面露字了。。。{:5_106:}

马黑黑 发表于 2022-4-29 10:43

东篱闲人发表于 2022-4-29 10:37
书下面露字了。。。

嗯，论坛的CSS样式和本地的不同，字数减一点就好。

马黑黑 发表于 2022-4-29 10:47

主要代码：
<style>
.book {
left: -214px;
display: flex;
align-items: center;
width: 1024px;
height: 700px;
perspective: 1800px;
cursor: pointer;
padding: 10px;
position: relative;
}
.page {
padding: 20px;
width: 478px;
height: 670px;
left: 50%;
transform-origin: left;
background-color: rgba(243,226,199,1);
background: linear-gradient(to right, rgba(193,158,103,1) 0%, rgba(182,141,76,1) 1%, rgba(233,212,179,1) 100%);
box-shadow: inset -10px -3px 6px rgba(243,226,199,1), 1px 1px 20px rgba(0,0,0,.15);
transform-style: preserve-3d;
position: absolute;
}

.page div { width: 100%; height: 100%; }
.page div:nth-child(1) { }
.page div:nth-child(2) { display: none; }

@keyframes rot1{
from { transform: rotateY(0deg); }
to { transform: rotateY(-180deg); }
}
@keyframes rot2{
from { transform: rotateY(-180deg); }
to { transform: rotateY(0deg); }
}
.page p { margin: 0; padding: 4px 0; }
.page img { width: 100%; height: 100%; }
h2 { font: bold 1.3em sans-serif; padding: 8px 0; margin: 0; }
.rnum { position: absolute; bottom: 4px; right: 10px; color: #777; font-size: 10px; }
.lnum { position: absolute; bottom: -16px; left: -6px; color: #777; font-size: 10px; }
.tit { font: bold 3em /3.5em sans-serif;color:#e6e6e6;text-shadow: 1px 1px 2px gray; }
.vtc { writing-mode: vertical-rl; }
.mid { text-align: center; }
.right { text-align: right; }
.redcolor { color: red; }
</style>

<div class="book">
<div class="page">
<div>
<p class="rnum">All in here</p>
<p class="right" style="color: #777;">馬<br>黑<br>黑</p>
<p class="tit vtc">書中自有黃金屋</p>
</div>
<div>
<p class="lnum">Never settle</p>
<p>HTML文档结构</p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">1</p>
<p>第一頁</p>
</div>
<div>
<p class="lnum">2</p>
<p>第二頁</p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">3</p>
<p>第三頁</p>
</div>
<div>
<p class="lnum">4</p>
<p>第四頁</p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">-End-</p>
<p>內封</p>
</div>
<div>
<p class="rnum">花潮出版社出版<br>正版書籍: ￥99.99</p>
<p>封底</p>
</div>
</div>
</div>
<script>
let page = document.querySelectorAll(".page");
let idx = 0;
let all = page.length;
let currentPage = 0;

setzIdx();

document.querySelector(".book").onclick = function(){
if(idx == 0){ //前翻
page.style.animation = "rot1 .5s linear forwards";
page.children.style.display = "none";
page.children.style.display = "block";
page.children.style.transform = "rotateY(-180deg)";
currentPage ++;
if(currentPage == all){
idx = 1;
currentPage = all - 1;
}
} else { //后翻
page.style.animation = "rot2 .5s linear forwards";
page.children.style.display = "none";
page.children.style.display = "block";
page.children.style.transform = "rotateY(360deg)";
currentPage --;
if(currentPage < 0){
idx = 0;
currentPage = 0;
}
}
setzIdx();
}

function setzIdx(){
for(j=0; j<all; j++){
page.style.zIndex = j >= currentPage ? page.style.zIndex = all - j : page.style.zIndex = j + 1;
}
if(page.style.zIndex <= all) page.style.zIndex = all;
}
</script>

马黑黑 发表于 2022-4-29 10:59

本帖最后由马黑黑于 2022-4-29 11:05 编辑

下面是HTML部分的代码，发布书籍要编辑的部分。有颜色的是需要修改或添加的内容，相同颜色块的处在同一张纸的正反两面，类推下去。编辑时不要破坏颜色代码以外的代码结构，添加纸张要确保所添加的是一整组的 class="page"、内含两组div 的代码（后面给实例）：

<div class="book">
   <div class="page">
            <div>
                     <p class="rnum">All in here</p>
                     <p class="right" style="color: #777;">馬<br>黑<br>黑</p>
                     <p class="tit vtc">書中自有黃金屋</p>
            </div>
            <div>
                     <p class="lnum">Never settle</p>
                     <p>HTML文档结构</p>
            </div>
   </div>
   <div class="page">
            <div>
                     <p class="rnum">1</p>
                     <p>第一頁</p>
            </div>
            <div>
                     <p class="lnum">2</p>
                     <p>第二頁</p>
            </div>
   </div>
   <div class="page">
            <div>
                     <p class="rnum">3</p>
                     <p>第三頁</p>
            </div>
            <div>
                     <p class="lnum">4</p>
                     <p>第四頁</p>
            </div>
   </div>
   <div class="page">
            <div>
                     <p class="rnum">-End-</p>
                     <p>內封</p>
            </div>
            <div>
                     <p class="rnum">花潮出版社出版<br>正版書籍: ￥99.99</p>
                     <p>封底</p>
            </div>
   </div>
</div>

附：添加纸张代码，我们加在第四页和内封之间：

<div class="book">
   <div class="page">
            <div>
                     <p class="rnum">All in here</p>
                     <p class="right" style="color: #777;">馬<br>黑<br>黑</p>
                     <p class="tit vtc">書中自有黃金屋</p>
            </div>
            <div>
                     <p class="lnum">Never settle</p>
                     <p>HTML文档结构</p>
            </div>
   </div>
   <div class="page">
            <div>
                     <p class="rnum">1</p>
                     <p>第一頁</p>
            </div>
            <div>
                     <p class="lnum">2</p>
                     <p>第二頁</p>
            </div>
   </div>
   <div class="page">
            <div>
                     <p class="rnum">3</p>
                     <p>第三頁</p>
            </div>
            <div>
                     <p class="lnum">4</p>
                     <p>第四頁</p>
            </div>
   </div>

   <div class="page">
            <div>
                     <p class="rnum">3</p>
                     <p>第五頁</p>
            </div>
            <div>
                     <p class="lnum">4</p>
                     <p>第六頁</p>
            </div>
   </div>

   <div class="page">
            <div>
                     <p class="rnum">-End-</p>
                     <p>內封</p>
            </div>
            <div>
                     <p class="rnum">花潮出版社出版<br>正版書籍: ￥99.99</p>
                     <p>封底</p>
            </div>
   </div>
</div>

马黑黑 发表于 2022-4-29 11:00

东篱闲人发表于 2022-4-29 10:37
书下面露字了。。。

黄金不好收藏{:4_170:}

东篱闲人 发表于 2022-4-29 11:03

马黑黑发表于 2022-4-29 11:00
黄金不好收藏

露富了。。。{:5_106:}

马黑黑 发表于 2022-4-29 11:06

东篱闲人发表于 2022-4-29 11:03
露富了。。。

一不小心……

红影发表于 2022-4-29 11:40

漂亮，化妆了就是好看{:4_199:}

马黑黑 发表于 2022-4-29 12:15

红影发表于 2022-4-29 11:40
漂亮，化妆了就是好看

外观可以各自弄弄，东篱他们弄的不错

加林森 发表于 2022-4-29 12:52

真漂亮，感谢老黑的分享。{:4_199:}

红影发表于 2022-4-29 22:57

马黑黑发表于 2022-4-29 12:15
外观可以各自弄弄，东篱他们弄的不错

东篱会做图，他弄出来的也都挺动脑筋，的确漂亮。

马黑黑 发表于 2022-4-30 08:41

红影发表于 2022-4-29 22:57
东篱会做图，他弄出来的也都挺动脑筋，的确漂亮。

主要是小辣椒说的他有艺术脓包{:4_170:}

红影发表于 2022-4-30 22:19

马黑黑发表于 2022-4-30 08:41
主要是小辣椒说的他有艺术脓包

艺术脓包{:4_173:}

马黑黑 发表于 2022-4-30 22:47

红影发表于 2022-4-30 22:19
艺术脓包

比细胞大多了吧

红影发表于 2022-5-2 08:01

马黑黑发表于 2022-4-30 22:47
比细胞大多了吧

是发起来的细胞，发得很大{:4_173:}

马黑黑 发表于 2022-5-2 09:25

红影发表于 2022-5-2 08:01
是发起来的细胞，发得很大

所以作品就与众不同，甚至是鹤立鸡群的

红影发表于 2022-5-2 11:12

马黑黑发表于 2022-5-2 09:25
所以作品就与众不同，甚至是鹤立鸡群的

这个解释很有趣{:4_189:}

马黑黑 发表于 2022-5-2 11:30

红影发表于 2022-5-2 11:12
这个解释很有趣

主要是恰当

页: [1]

花潮论坛's Archiver

黑书也化个妆