岁月AE制作展示（小黑书v3（六一特别版）TO：走过岁月
<style>.book {/* 容器 */
left: -214px; margin-top: 150px; display: flex; align-items: center;
font: normal 1em sans-serif; width: 1024px; height: 600px;
perspective: 2000px; cursor: pointer; padding: 10px; position: relative;
}
.page {/* 纸张 高度小于父元素30px*/
padding: 20px;width: 478px; height: 570px; 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 5px rgba(0,0,0,.15);
transform-style: preserve-3d; position: absolute;
}
.page div { width: 100%; height: 100%; }/* 书页 */
.page div:nth-child(1) { display: block; }/* 单数页 */
.page div:nth-child(2) { display: none; }/* 双数页 */
.page div img { width: 100%;} /* img标签：限制宽度 */
@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; }/* 各页p标签 */
.page h2 { font: bold 1.3em sans-serif; padding: 8px 0; margin: 0; }/* 各页h2标题 */
.cover { background: darkgreen linear-gradient(rgba(255,255,255, .65), rgba(255,255,255, .95)); }/* 封面封底纸张样式 */
.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; letter-spacing: 20px; }/* 书名 */
.mid { text-align: center; }/* 居中对齐 */
.right { text-align: right; }/* 右对齐 */
.red { color: red; }/* 红色文本 */
</style>
<div class="book">
<div class="page cover">
<div><!-- 封面 -->
<p class="rnum">编辑制作：小辣椒</p>
<p><img src="https://wj.zp68.com/lxx/yunhua/2022/05/28/fm.png" alt="" /></p>
</div>
<div><!-- 扉页 -->
<p class="lnum">前言</p>
<p><img src="https://wj.zp68.com/lxx/yunhua/2022/05/28/qm.png" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">1</p>
<p><br><br>一 .希望之路<br><br><br></p>
<p><img src="https://wj.zp68.com/lxx/yunhua/2022/05/28/01.gif " alt="" /></p>
</div>
<div>
<p class="lnum">2</p>
<p><br><br>二 .醉人的香吻<br><br><br></p>
<p><img src="https://wj.zp68.com/lxx/yunhua/2022/05/28/02.gif" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">3</p>
<p><br><br>三 .读你千遍不厌倦<br><br><br></p>
<p><img src="https://wj.zp68.com/lxx/yunhua/2022/05/28/03.gif" alt="" /></p>
</div>
<div>
<p class="lnum">4</p>
<p><br><br>四 .心上人——萨克斯音乐 <br><br><br></p>
<p><img src="https://wj.zp68.com/lxx/yunhua/2022/05/28/04.gif" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">5</p>
<p><br><br>五 .娜奴娃情歌<br><br><br></p>
<p><img src="https://wj.zp68.com/lxx/yunhua/2022/05/28/05.gif" alt="" /></p>
</div>
<div>
<p class="lnum">6</p>
<p><br><br>六 . 谐谑曲《过河》<br><br><br></p>
<p><img src="https://wj.zp68.com/lxx/yunhua/2022/05/28/06.gif" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">7</p>
<p><br><br>七 . 旧欢如梦话当年<br><br><br></p>
<p><img src="https://wj.zp68.com/lxx/yunhua/2022/05/28/07.gif" alt="" /></p>
</div>
<div>
<p class="lnum">8</p>
<p><br><br>八 .醒在梦河流域 <br><br><br></p>
<p><img src="https://wj.zp68.com/lxx/yunhua/2022/05/28/08.gif" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">9</p>
<p><br><br>九 . 奔腾的河流<br><br><br></p>
<p><img src="https://wj.zp68.com/lxx/yunhua/2022/05/28/09.gif" alt="" /></p>
</div>
<div>
<p class="lnum">10</p>
<p><br><br>十.夜店酒吧电音<br><br><br></p>
<p><img src="https://wj.zp68.com/lxx/yunhua/2022/05/28/10.gif" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">11</p>
<p><br><br>十一. ZOMBIE<br><br><br></p>
<p><img src="https://wj.zp68.com/lxx/yunhua/2022/05/28/11.gif" alt="" /></p>
</div>
<div>
<p class="lnum">12</p>
<p><br><br>十二 . 一样爱你——飞扬的小号<br><br><br></p>
<p><img src="https://wj.zp68.com/lxx/yunhua/2022/05/28/12.gif" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">13</p>
<p><br><br>十三 . 多情时尚的小号<br><br><br></p>
<p><img src="https://wj.zp68.com/lxx/yunhua/2022/05/28/13.gif" alt="" /></p>
</div>
<div>
<p class="lnum">14</p>
<p><br><br>十四.秋水伊人<br><br><br></p>
<p><img src="https://wj.zp68.com/lxx/yunhua/2022/05/28/14.gif" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">15</p>
<p><br><br>十五 . 星星的夜空<br><br><br></p>
<p><img src="https://wj.zp68.com/lxx/yunhua/2022/05/28/15.gif" alt="" /></p>
</div>
<div>
<p class="lnum">16</p>
<p><br><br>十六. 天空依然孤独 <br><br><br></p>
<p><img src="https://wj.zp68.com/lxx/yunhua/2022/05/28/16.gif" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">17</p>
<p><br><br>十七 .真情比酒浓<br><br><br></p>
<p><img src="https://wj.zp68.com/lxx/yunhua/2022/05/28/17.gif" alt="" /></p>
</div>
<div>
<p class="lnum">18</p>
<p><br><br>十八 .繁星照不亮的夜空<br><br><br></p>
<p><img src="https://wj.zp68.com/lxx/yunhua/2022/05/28/18.gif" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">19</p>
<p><br><br>十九.飞越太空<br><br><br></p>
<p><img src="https://wj.zp68.com/lxx/yunhua/2022/05/28/19.gif" alt="" /></p>
</div>
<div>
<p class="lnum">20</p>
<p><br><br>二十 .周末夜店 动感混音 <br><br><br></p>
<p><img src="https://wj.zp68.com/lxx/yunhua/2022/05/28/20.gif" alt="" /></p>
</div>
</div>
<div class="page cover">
<div><!-- 内封 -->
<p><img src="https://wj.zp68.com/lxx/yunhua/2022/05/28/hm.png" alt="" /></p>
</div>
<div><!-- 封底 -->
<p class="rnum">花潮论坛出版 2022</p>
<p><img src="https://wj.zp68.com/lxx/yunhua/2022/05/28/fd.png" alt="" /></p>
</div>
</div>
</div>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2022/05/28/01.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 = 5, timer;//auto为自动翻页间隔时间（秒）
setzIdx();
setAuto();
book.onmousemove = () => { clearTimeout(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() {
clearTimeout(timer);
timer = setTimeout(() => {
turnpage();
setAuto();
}, 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>
<br><br><br><br><br><br><br> 谢谢黑黑的教程分享和指导，想再改漂亮一点，感觉这个书本颜色最合适了，就这样了@马黑黑
谢谢岁月AE精美制作。小辣椒不会，捣鼓你的效果太多了，感谢岁月的好脾气，小辣椒瞎捣鼓都不会说{:4_173:}
@走过岁月 感觉动图比较大，打开会慢一点，请稍等。。。 小辣椒这个特效翻页真漂亮，制作得精美。大赞！{:4_199:} 漂亮的制作{:4_178:} 亲爱的把每个效果都截图了，也是很用心。这些效果真漂亮啊{:4_199:} 用小黑书的方式把这些效果集中起来，也是个不错的纪念呢。给亲爱的点赞，给岁月点赞{:4_187:} 来了，看看，小辣椒的作品一定很精彩 翻页效果，棒啊 制作真棒啊，真快都要六一了 20个作品，收集起来不简单，上传也费劲，小辣椒很有耐心 {:4_204:} 再来学习。 我就当六一的礼物了 {:5_106:}，好开心 小辣椒辛苦了，抱抱美女 {:4_179:} 欣赏走过岁月的精美、雅致的作品！
欣赏小辣椒细致、精致的制作！ 欣赏如此精致的AE，让人有如漫步在音乐的海洋，流连忘返…… 醉美水芙蓉 发表于 2022-5-28 19:38
欣赏小辣椒美女精彩制作！
谢谢水芙蓉欣赏{:4_171:} 加林森 发表于 2022-5-28 19:48
小辣椒这个特效翻页真漂亮，制作得精美。大赞！
啊啊，谢谢队长夸奖{:4_179:}