先睹为快：小黑书61特别版（预览）
本帖最后由 马黑黑 于 2022-5-26 07:54 编辑 <br /><br /><style>.book {/* 容器 */
left: -214px; margin-top: 50px; display: flex; align-items: center;
font: normal 1em sans-serif; width: 1024px; height: 560px;
perspective: 2000px; cursor: pointer; padding: 10px; position: relative;
}
.page {/* 纸张 高度小于父元素30px*/
padding: 20px;width: 478px; height: 530px; left: 50%; transform-origin: left;
background: lightseagreen linear-gradient(rgba(255,255,255, .95), rgba(255,255,255, .75));
box-shadow: inset -3px -3px 6px rgba(255,255,255,.5), 1px 1px 20px rgba(0,0,0,.15);
transform-style: preserve-3d; position: absolute;
}
.page div { width: 100%; height: 100%; }/* 书页 */
.page div img { width: 100%;} /* img标签：限制宽度 */
.page div:nth-child(1) { display: block; }/* 单数页 */
.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); } }/* 右翻动画 */
.cover { background: darkgreen linear-gradient(rgba(255,255,255, .65), rgba(255,255,255, .95)); }/* 封面封底纸张样式 */
.page p { margin: 0; padding: 4px 0; }/* 各页p标签 */
.page h2 { font: bold 1.3em sans-serif; padding: 8px 0; margin: 0; }/* 各页h2标题 */
.rnum { position: absolute; bottom: 6px; right: 12px; color: #000; font-size: 10px; }/* 右页码 */
.lnum { position: absolute; bottom: -14px; left: -4px; color: #000; font-size: 10px; }/* 左页码 */
.tit { font: bold 3em / 6em sans-serif; color:olive; text-shadow: 1px 1px 2px gray; text-align: center; }/* 书名 */
.vtc { writing-mode: vertical-rl; text-align: center; }/* 竖排 */
.mid { text-align: left; }/* 居中对齐 */
.right { text-align: right; }/* 右对齐 */
.red { color: red; }/* 红色文本 */
</style>
<div class="book">
<div class="page cover">
<div><!-- 封面 -->
<p class="rnum">花潮出品</p>
<p>微软Windows</p>
<p class="tit">简史</p>
</div>
<div><!-- 扉页 -->
<p class="lnum">BB6.1特别版</p>
<h2>61版小黑书说明：</h2>
<p>一、取消手动点击翻页。自动翻页间隔时间默认2秒，可修改，关键代码是 JS 中 auto = 2</p>
<p>二、暂停翻页：鼠标指针移至书本区域，指针为手型时书本暂不翻页、移出鼠标继续自动翻页</p>
<p>三、背景音乐：单击书本切换播放暂停</p>
<p>四、可能的异常：极端情形下会引发书页疯狂翻页，刷新即可</p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">1</p>
<p>Windows 1.0(1985)<br /><br />最原始的MICROSOFT标志<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/1.jpeg" alt="" /></p>
</div>
<div>
<p class="lnum">2</p>
<p>Windows 2.03(1987)<br /><br />Microsoft标志开始迈向成熟<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/2.jpeg" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">3</p>
<p>Windows 3.0(1990)<br /><br />Windows首个大获成功的版本<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/3.jpeg" alt="" /></p>
</div>
<div>
<p class="lnum">4</p>
<p>Windows 3.1(1992)<br /><br />Logo开始出现有红黄蓝绿组成的"田"字型，形成了我们熟悉的“窗口”Logo<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/4.jpeg" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">5</p>
<p>Windows 3.11(1993)<br /><br />Logo的稍作修改<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/5.jpeg" alt="" /></p>
</div>
<div>
<p class="lnum">6</p>
<p>Windows NT 3.1(1993)<br /><br />面向工作站，服务器的Windows版本<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/6.jpeg" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">7</p>
<p>Windows 95(1995)<br /><br />蓝天白云的首次出现，IE浏览器也随这个版本出现。<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/7.jpeg" alt="" /></p>
</div>
<div>
<p class="lnum">8</p>
<p>Windows 98(1998)<br /><br />Windows 95的接班人<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/8.jpeg" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">9</p>
<p>Windows 2000(2000)<br /><br />Windows 2000是以WindowsNT为架构的操作系统，是真正的32位操作系统<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/9.jpeg" alt="" /></p>
</div>
<div>
<p class="rnum">10</p>
<p>Windows ME(2000)<br /><br />最后一个基于DOS的9X系统Windows系统<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/10.jpeg" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">11</p>
<p>Windows XP(2001)<br /><br />史上最受欢迎的系统，服务将近近17年的时间。Windows Logo开始进入旗帜时代<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/11.jpeg" alt="" /></p>
</div>
<div>
<p class="rnum">12</p>
<p>Windows Server 2003(2003)<br /><br />用作服务器的版本<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/12.jpeg" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">13</p>
<p>WindowsVista(2005)<br /><br />可以算是微软最失败的Windows版本，但个人觉得是最为酷炫的。首次加入了Aero视觉效果<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/13.jpeg" alt="" /></p>
</div>
<div>
<p class="rnum">14</p>
<p>Windows Server 2008(2008)<br /><br />Windows Server 2003的接班者<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/14.jpeg" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">15</p>
<p>Windows 7(2009)<br /><br />继承了WindowsVista的Aero视觉效果。比WindowsVista更加简洁，高效<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/15.jpeg" alt="" /></p>
</div>
<div>
<p class="rnum">16</p>
<p>Windows 8(2012)<br /><br />Logo迈进了“田字牌”时代。Windows8使用了扁平化的Metro界面，使用了WinRT开发平台<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/16.jpeg" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">17</p>
<p>Windows 10(2012)<br /><br />Logo跟Windows 8都是“田字牌”。但Windows 10加入了许多新的功能，Cortana语音搜索、全新的动作中心、全新的Edge浏览器、Windows Hello安全登陆。微软宣称Windows10是微软发布的最后一个独立Windows版本。<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/17.jpeg" alt="" /></p>
</div>
<div>
<p class="rnum">18</p>
<p>Windows 11(2021)<br /><br />然后是微软啪啪啪自己打脸，Windows 11出生至今也有些时日了……让我们期待Windows 12……<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/18.png" alt="" /></p>
</div>
</div>
<div class="page cover">
<div><!-- 内封 -->
<p class="rnum">all for you</p>
<h2>音乐相关代码</h2>
<p>一、HTML：最后一行</p>
<p>二、JS：<br /><br />① 变量 aud = document.querySelector('#aud')<br /><br />② book.onclick = () => { aud.paused ? aud.play() : aud.pause(); } </p>
</div>
<div><!-- 封底 -->
<p class="rnum">花潮出版社出版</p>
</div>
</div>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/02/08/5ec4836c87fd69cc93b084c51d1cba3f.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let book = document.querySelector(".book"), page = document.querySelectorAll(".page"), aud = document.querySelector("#aud");
let idx = 1, all = page.length, currentPage = 0, auto = 2, timer;
setzIdx();
setAuto();
book.onmousemove = () => { clearInterval(timer); }
book.onmouseout = () => { setAuto(); }
book.onclick = () => { aud.paused ? aud.play() : aud.pause(); }
function turnpage(){
if(idx == 1) { //左翻
if(currentPage != all){
page.style.animation = "rot1 .5s linear forwards";
page.children.style.display = "none";
page.children.style.display = "block";
page.children.style.transform = "rotateY(-180deg)";
}
} else { //右翻
if(currentPage > 0) {
page.style.animation = "rot2 .5s linear forwards";
page.children.style.display = "none";
page.children.style.display = "block";
page.children.style.transform = "rotateY(0deg)";
}
}
currentPage += idx;
if(currentPage >= all) idx = -1;
if(currentPage <= 0) idx = 1;
setzIdx();
}
function setAuto() { timer = setInterval(turnpage, auto * 1000); }
function setzIdx(){
if( currentPage < 0 || currentPage > all -1) return false;
for(j=0; j<all; j++){
page.style.zIndex = j >= currentPage ? page.style.zIndex = all - j : page.style.zIndex = j + 1;
}
if(currentPage <= all - 1) page.style.zIndex = all;
}
</script>
完整代码（本地测试请将CSS代码 .book 选择器中的 left: -214px; 改为 margin: auto;）
<style>
.book {/* 容器 */
left: -214px; margin-top: 50px; display: flex; align-items: center;
font: normal 1em sans-serif; width: 1024px; height: 560px;
perspective: 2000px; cursor: pointer; padding: 10px; position: relative;
}
.page {/* 纸张 高度小于父元素30px*/
padding: 20px;width: 478px; height: 530px; left: 50%; transform-origin: left;
background: lightseagreen linear-gradient(rgba(255,255,255, .95), rgba(255,255,255, .75));
box-shadow: inset -3px -3px 6px rgba(255,255,255,.5), 1px 1px 20px rgba(0,0,0,.15);
transform-style: preserve-3d; position: absolute;
}
.page div { width: 100%; height: 100%; }/* 书页 */
.page div img { width: 100%;} /* img标签：限制宽度 */
.page div:nth-child(1) { display: block; }/* 单数页 */
.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); } }/* 右翻动画 */
.cover { background: darkgreen linear-gradient(rgba(255,255,255, .65), rgba(255,255,255, .95)); }/* 封面封底纸张样式 */
.page p { margin: 0; padding: 4px 0; }/* 各页p标签 */
.page h2 { font: bold 1.3em sans-serif; padding: 8px 0; margin: 0; }/* 各页h2标题 */
.rnum { position: absolute; bottom: 6px; right: 12px; color: #000; font-size: 10px; }/* 右页码 */
.lnum { position: absolute; bottom: -14px; left: -4px; color: #000; font-size: 10px; }/* 左页码 */
.tit { font: bold 3em / 6em sans-serif; color:olive; text-shadow: 1px 1px 2px gray; text-align: center; }/* 书名 */
.vtc { writing-mode: vertical-rl; text-align: center; }/* 竖排 */
.mid { text-align: left; }/* 居中对齐 */
.right { text-align: right; }/* 右对齐 */
.red { color: red; }/* 红色文本 */
</style>
<div class="book">
<div class="page cover">
<div><!-- 封面 -->
<p class="rnum">花潮出品</p>
<p>微软Windows</p>
<p class="tit">简史</p>
</div>
<div><!-- 扉页 -->
<p class="lnum">BB6.1特别版</p>
<h2>61版小黑书说明：</h2>
<p>一、取消手动点击翻页。自动翻页间隔时间默认2秒，可修改，关键代码是 JS 中 auto = 2</p>
<p>二、暂停翻页：鼠标指针移至书本区域，指针为手型时书本暂不翻页、移出鼠标继续自动翻页</p>
<p>三、背景音乐：单击书本切换播放暂停</p>
<p>四、可能的异常：极端情形下会引发书页疯狂翻页，刷新即可</p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">1</p>
<p>Windows 1.0(1985)<br /><br />最原始的MICROSOFT标志<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/1.jpeg" alt="" /></p>
</div>
<div>
<p class="lnum">2</p>
<p>Windows 2.03(1987)<br /><br />Microsoft标志开始迈向成熟<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/2.jpeg" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">3</p>
<p>Windows 3.0(1990)<br /><br />Windows首个大获成功的版本<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/3.jpeg" alt="" /></p>
</div>
<div>
<p class="lnum">4</p>
<p>Windows 3.1(1992)<br /><br />Logo开始出现有红换蓝绿组成的"田"字型，形成了我们熟悉的“窗口”Logo<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/4.jpeg" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">5</p>
<p>Windows 3.11(1993)<br /><br />Logo的稍作修改<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/5.jpeg" alt="" /></p>
</div>
<div>
<p class="lnum">6</p>
<p>Windows NT 3.1(1993)<br /><br />面向工作站，服务器的Windows版本<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/6.jpeg" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">7</p>
<p>Windows 95(1995)<br /><br />蓝天白云的首次出现，IE浏览器也随这个版本出现。<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/7.jpeg" alt="" /></p>
</div>
<div>
<p class="lnum">8</p>
<p>Windows 98(1998)<br /><br />Windows 95的接班人<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/8.jpeg" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">9</p>
<p>Windows 2000(2000)<br /><br />Windows 2000是以WindowsNT为架构的操作系统，是真正的32位操作系统<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/9.jpeg" alt="" /></p>
</div>
<div>
<p class="rnum">10</p>
<p>Windows ME(2000)<br /><br />最后一个基于DOS的9X系统Windows系统<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/10.jpeg" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">11</p>
<p>Windows XP(2001)<br /><br />史上最受欢迎的系统，服务将近近17年的时间。Windows Logo开始进入旗帜时代<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/11.jpeg" alt="" /></p>
</div>
<div>
<p class="rnum">12</p>
<p>Windows Server 2003(2003)<br /><br />用作服务器的版本<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/12.jpeg" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">13</p>
<p>WindowsVista(2005)<br /><br />可以算是微软最失败的Windows版本，但个人觉得是最为酷炫的。首次加入了Aero视觉效果<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/13.jpeg" alt="" /></p>
</div>
<div>
<p class="rnum">14</p>
<p>Windows Server 2008(2008)<br /><br />Windows Server 2003的接班者<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/14.jpeg" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">15</p>
<p>Windows 7(2009)<br /><br />继承了WindowsVista的Aero视觉效果。比WindowsVista更加简洁，高效<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/15.jpeg" alt="" /></p>
</div>
<div>
<p class="rnum">16</p>
<p>Windows 8(2012)<br /><br />Logo迈进了“田字牌”时代。Windows8使用了扁平化的Metro界面，使用了WinRT开发平台<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/16.jpeg" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">17</p>
<p>Windows 10(2012)<br /><br />Logo跟Windows 8都是“田字牌”。但Windows 10加入了许多新的功能，Cortana语音搜索、全新的动作中心、全新的Edge浏览器、Windows Hello安全登陆。微软宣称Windows10是微软发布的最后一个独立Windows版本。<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/17.jpeg" alt="" /></p>
</div>
<div>
<p class="rnum">18</p>
<p>Windows 11(2021)<br /><br />然后是微软啪啪啪自己打脸，Windows 11出生至今也有些时日了……让我们期待Windows 12……<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/18.png" alt="" /></p>
</div>
</div>
<div class="page cover">
<div><!-- 内封 -->
<p class="rnum">all for you</p>
<h2>音乐相关代码</h2>
<p>一、HTML：最后一行</p>
<p>二、JS：<br /><br />① 变量 aud = document.querySelector('#aud')<br /><br />② book.onclick = () => { aud.paused ? aud.play() : aud.pause(); } </p>
</div>
<div><!-- 封底 -->
<p class="rnum">花潮出版社出版</p>
</div>
</div>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/02/08/5ec4836c87fd69cc93b084c51d1cba3f.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let book = document.querySelector(".book"), page = document.querySelectorAll(".page"), aud = document.querySelector("#aud");
let idx = 1, all = page.length, currentPage = 0, auto = 2, timer;
setzIdx();
setAuto();
book.onmousemove = () => { clearInterval(timer); }
book.onmouseout = () => { setAuto(); }
book.onclick = () => { aud.paused ? aud.play() : aud.pause(); }
function turnpage(){
if(idx == 1) { //左翻
if(currentPage != all){
page.style.animation = "rot1 .5s linear forwards";
page.children.style.display = "none";
page.children.style.display = "block";
page.children.style.transform = "rotateY(-180deg)";
}
} else { //右翻
if(currentPage > 0) {
page.style.animation = "rot2 .5s linear forwards";
page.children.style.display = "none";
page.children.style.display = "block";
page.children.style.transform = "rotateY(0deg)";
}
}
currentPage += idx;
if(currentPage >= all) idx = -1;
if(currentPage <= 0) idx = 1;
setzIdx();
}
function setAuto() { timer = setInterval(turnpage, auto * 1000); }
function setzIdx(){
if( currentPage < 0 || currentPage > all -1) return false;
for(j=0; j<all; j++){
page.style.zIndex = j >= currentPage ? page.style.zIndex = all - j : page.style.zIndex = j + 1;
}
if(currentPage <= all - 1) page.style.zIndex = all;
}
</script>
老黑又出新版了，支持！好漂亮的。{:4_199:} 加林森 发表于 2022-5-26 07:48
老黑又出新版了，支持！好漂亮的。
感谢支持！
{:4_180:} 马黑黑 发表于 2022-5-26 07:54
感谢支持！
谢茶！ 加林森 发表于 2022-5-26 08:01
谢茶！
早晨一杯茶，加班到累趴{:4_170:} 马黑黑 发表于 2022-5-26 08:05
早晨一杯茶，加班到累趴
你辛苦了！{:4_171:} 这个好，不用自己动手了，还能用鼠标移上去暂停。黑黑辛苦了{:4_187:} 以前很少看到黑马发帖，只看到他灌水。
高手就是不同哈 高级制作，非常实用。你真棒！ 梦油 发表于 2022-5-26 10:28
高级制作，非常实用。你真棒！
预览的 红影 发表于 2022-5-26 08:22
这个好，不用自己动手了，还能用鼠标移上去暂停。黑黑辛苦了
儿童要吃瓜子，没空翻书{:4_170:} 依蘩 发表于 2022-5-26 10:24
以前很少看到黑马发帖，只看到他灌水。
高手就是不同哈
这个也是灌水的 马黑黑 发表于 2022-5-26 12:10
预览的
你教的东西都挺实用 梦油 发表于 2022-5-26 16:24
你教的东西都挺实用
一般一般班里倒数第三 马黑黑 发表于 2022-5-26 12:11
儿童要吃瓜子，没空翻书
有黑黑代为翻书{:4_173:} 马黑黑 发表于 2022-5-26 19:03
一般一般班里倒数第三
你得教学很有针对性和实用性，所以很受朋友们的欢迎 梦油 发表于 2022-5-26 20:16
你得教学很有针对性和实用性，所以很受朋友们的欢迎
还行还行 红影 发表于 2022-5-26 20:06
有黑黑代为翻书
是CSS和定时器翻书 马黑黑 发表于 2022-5-26 20:17
还行还行
不是“还行”，是很好，而且很受欢迎，并且已经开花结果了。