文章目录
- 1.设计来源
- 1.1 主界面
- 1.2 相关界面
- 2.效果和源码
- 2.1 动态效果
- 2.2 源代码
- 源码下载
作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/131022313
html爱情表白神器，回忆纪念册html爱情表白神器，用酸甜苦辣的记忆，翻动心中的荷尔蒙，html翻书效果源码，html书本翻页效果源码，html电子书效果，酷炫的界面动画效果，精致细化的布局，背景星空之夜，每一页都是高清壁纸。
1.设计来源
1.1 主界面
- 背景音乐：我的梦（支持改成自己喜欢的音乐）
- 背景：夜下星空
- 背景文字：十句名言（支持改成自己喜欢的文字）
- 主题效果：翻书特效
- 页码：8 页（支持自己扩展）
回忆纪念册,记录双方的回忆瞬间，永久保存，情人节、生日、纪念日，可以给彼此温馨回忆。快来动手制作自己的 回忆纪念册 。
1.2 相关界面
每页不同的效果，可以复用，也可以在此基础上扩展，打造属于自己的回忆纪念册 ，具体效果，见下面视频展示效果。
页码 2-3
页码 4-5
页码 6-7
2.效果和源码
2.1 动态效果
html爱情表白神器，回忆纪念册
2.2 源代码
这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html实现翻书特效爱情纪念册 - xcLeigh</title>
<link rel="icon" type="image/png" href="img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel='stylesheet' href='css/all.min.css'>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="css/animate.min.css" />
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class="htmleaf-container">
<div class='pages'>
<input id='one' name='trigger' type='radio'>
<input id='two' name='trigger' type='radio'>
<input id='three' name='trigger' type='radio'>
<input id='four' name='trigger' type='radio'>
<div class='pages_page'>
<div class='pages_page__inner'>
<div class='logo'>回忆纪念册</div>
<div class='pagenumber'>1 2</div>
<div class='content'>
<div class='content_center'>
<h4>梁山伯❤祝英台</h4>
</div>
</div>
</div>
</div>
<div class='pages_page'>
<div class='pages_page__inner'>
<div class='content'>
<div class='content_center right'>
<h4>梁山伯❤祝英台</h4>
</div>
<div class='overlay'></div>
</div>
<div class='control next'>
<label for='two'></label>
</div>
</div>
</div>
<div class='pages_page'>
<div class='pages_page__inner'>
<div class='logo'>回忆纪念册</div>
<div class='pagenumber'>2 3</div>
<div class='control'>
<label for='one'></label>
</div>
<div class='content'>
<div class='content_picture'>
<img src='img/Bild01.jpg'>
</div>
<div class='content_offset'>
<h2>致爱情</h2>
<p> 爱一个人,要懂得在欣赏的同时,适时地给予对方更多的鼓励,才能让彼此擦出更多的火花;爱一个人,要学会在体谅的同时,耐心地了解对方真正的想法和感受,才能让这段感情日久弥新。爱情不是付出了许多,就能得到相同的温柔。人世间有百媚千红，惟独你是我情之所钟。心若一动，泪就千行。你已远去，音容不见。</p>
</div>
<h1>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span>死</span>
<span>生</span>
<span>契</span>
<span>阔</span>
<span>，</span>
<span>与</span>
<span>子</span>
<span>相</span>
<span>悦</span>
<span>；</span>
<span>执</span>
<span>子</span>
<span>之</span>
<span>手</span>
<span>，</span>
<span>与</span>
<span>子</span>
<span>偕</span>
<span>老</span>
<span>。</span>
</h1>
</div>
</div>
</div>
<div class='pages_page'>
<div class='pages_page__inner'>
<div class='hamburger ibutton' onclick="showUrl()">
<div class='hamburger_part'></div>
<div class='hamburger_part'></div>
<div class='hamburger_part'></div>
</div>
<div class='control next'>
<label for='three'></label>
</div>
<div class='bg'></div>
<div class='footer'>
<i class="fab fa-google-plus-g ibutton" onclick="showUrl()"></i>
<i class="fas fa-retweet ibutton" onclick="showUrl()"></i>
<i class="far fa-heart ibutton" onclick="showUrl()"></i>
<i class="far fa-share-square ibutton" onclick="showUrl()"></i>
</div>
<div class='content'>
<div class='content_quote'>
<h5>
<span class='quo'>
<i>"</i>
</span>
<span>愿作比翼鸟</span>
<span style="padding-top: 20px;">愿为连理枝</span>
<span class='name'>爱你的人</span>
<span class='auth'></span>
<span class='quo'>"</span>
</h5>
</div>
<div class='content_picture'>
<img src='img/Bild01.jpg'>
</div>
<h1>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span>死</span>
<span>生</span>
<span>契</span>
<span>阔</span>
<span>，</span>
<span>与</span>
<span>子</span>
<span>相</span>
<span>悦</span>
<span>；</span>
<span>执</span>
<span>子</span>
<span>之</span>
<span>手</span>
<span>，</span>
<span>与</span>
<span>子</span>
<span>偕</span>
<span>老</span>
<span>。</span>
</h1>
</div>
</div>
</div>
<div class='pages_page'>
<div class='pages_page__inner'>
<div class='logo'>回忆纪念册</div>
<div class='pagenumber'>4 5</div>
<div class='content'>
<div class='content_center'>
<h4>流年中的爱情是一种残酷的美，它让残缺的爱在彼此的记忆中化作永恒。</h4>
<h6>回忆的甜蜜，像酒香的醇厚</h6>
</div>
</div>
<div class='control'>
<label for='two'></label>
</div>
</div>
</div>
<div class='pages_page'>
<div class='pages_page__inner'>
<div class='hamburger ibutton' onclick="showUrl()">
<div class='hamburger_part'></div>
<div class='hamburger_part'></div>
<div class='hamburger_part'></div>
</div>
<div class='control next'>
<label for='four'></label>
</div>
<div class='bg'></div>
<div class='content_centerimage'>
<img src='img/profoto-collapsible-reflectors-rossella-vanon-fashion-photography-img_2013-600x900.jpg'>
</div>
<div class='content'>
<div class='content_center right'>
<h4>流年中的爱情是一种残酷的美，它让残缺的爱在彼此的记忆中化作永恒。</h4>
<h6>回忆的甜蜜，像酒香的醇厚</h6>
</div>
</div>
<div class='footer'>
<i class="fab fa-google-plus-g ibutton" onclick="showUrl()"></i>
<i class="fas fa-retweet ibutton" onclick="showUrl()"></i>
<i class="far fa-heart ibutton" onclick="showUrl()"></i>
<i class="far fa-share-square ibutton" onclick="showUrl()"></i>
</div>
</div>
</div>
<div class='pages_page'>
<div class='pages_page__inner'>
<div class='logo'>回忆纪念册</div>
<div class='pagenumber'>6 7</div>
<div class='content'>
<div class='content_section'>
<h2>亲爱的</h2>
<p>生命是一个奇迹，缘分是一次意外，幸福是一种期待，快乐是一种心态，相思是一种无奈，能结识你是上天给我的厚爱！</p>
</div>
<div class='content_section'>
<h2>致未来</h2>
<p>爱一个人，要懂得在欣赏的同时，适时地给予对方更多的鼓励，才能让彼此擦出更多的火花；爱一个人，要学会在体谅的同时，耐心地了解对方真正的想法和感受，才能让这段感情日久弥新。</p>
</div>
</div>
<div class='control'>
<label for='three'></label>
</div>
</div>
</div>
<div class='pages_page'>
<div class='pages_page__inner'>
<div class='hamburger ibutton' onclick="showUrl()">
<div class='hamburger_part'></div>
<div class='hamburger_part'></div>
<div class='hamburger_part'></div>
</div>
<div class='bg'></div>
<div class='content'></div>
<div class='footer'>
<i class="fab fa-google-plus-g ibutton" onclick="showUrl()"></i>
<i class="fas fa-retweet ibutton" onclick="showUrl()"></i>
<i class="far fa-heart ibutton" onclick="showUrl()"></i>
<i class="far fa-share-square ibutton" onclick="showUrl()"></i>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
源码下载
html爱情表白神器，回忆纪念册（源码） 点击下载
💞 关注博主 带你实现畅游前后端
🏰 加入社区 带你体验马航不孤单
💯 神秘个人简介 带你体验不一样得介绍
🎀 酷炫邀请函 带你体验高大上得邀请
① 🉑提供云服务部署（有自己的阿里云）；
② 🉑提供前端、后端、应用程序、H5、小程序、公众号等相关业务；
如🈶合作请联系我，期待您的联系。
注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。
亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请留言（评论），博主看见后一定及时给您答复，💌💌💌
原文地址：https://blog.csdn.net/weixin_43151418/article/details/131022313（防止抄袭，原文地址不可删除）
