文章目录

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>&nbsp;&nbsp;&nbsp;&nbsp;爱一个人,要懂得在欣赏的同时,适时地给予对方更多的鼓励,才能让彼此擦出更多的火花;爱一个人,要学会在体谅的同时,耐心地了解对方真正的想法和感受,才能让这段感情日久弥新。爱情不是付出了许多,就能得到相同的温柔。人世间有百媚千红，惟独你是我情之所钟。心若一动，泪就千行。你已远去，音容不见。</p></div><h1><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</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>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</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爱情表白神器，回忆纪念册（源码）点击下载

html爱情表白神器，回忆纪念册(附源码)相关推荐

html实现爱情纪念册(附源码)
文章目录 1.设计思路 1.1 主界面 1.2 情话界面 1.3 蜜语界面 1.4 誓言界面 1.5 相约界面 2.效果展示源码 2.1 效果展示 2.2 代码源码下载作者:xcLeigh 文章地 ...
从零实现在线云相亲APP｜程序员脱单神器（内附源码Demo)
实时音视频通话涉及到的技术栈.人力成本.硬件成本非常大,一般个人开发者基本无法独立完成一个功能健全并且稳定的实时音视频应用.本文介绍一天之内,无任何实时音视频低层技术的android开发者完成实时相亲 ...
可以表白的生日祝福（附源码与修改教程）
可以表白的
表白代码制作（附源码）
第一步:下载链接:https://pan.baidu.com/s/1o_8lsGhsf57DVgbiTfnkYA 提取码:oqox 复制这段内容后打开百度网盘手机App,操作更方便哦第二步:解 ...
2花瓣html,html花瓣飘落特效_520情侣浪漫表白JS特效分享（附源码）
520要来了,为回馈朋友们所有专栏8折优惠,感兴趣的朋友可以订阅,感谢大家的支持! 520马上就要到,作为程序员的你是不是也想送个特别的礼物.今天给大家分享一个HTML5+CSS3+jQuery实现的 ...
html实现爱情浪漫表白甜蜜时刻(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 相识界面 1.3 相知界面 1.4 相爱界面 2.效果和源码 2.1 动态效果 2.2 源代码源码下载作者:xcLeigh 文章地址:https:/ ...
【表白神器】Python超火隐藏表白图你能看出来吗？【附源码】
导语浪漫至死不渝,温柔绝对屈服. -马上国庆了-没啥送的-那就送大家一些表白的代码吧- 大兄弟小姐妹们,大家好! 我是准时上线更新代码+讲故事的程序媛小姐姐! 整理了一款超火的『隐藏表白代码 ...
「表白神器」Python超火隐藏表白图你能看出来吗？「附源码」
导语浪漫至死不渝,温柔绝对屈服. -马上国庆了-没啥送的-那就送大家一些表白的代码吧- 大兄弟小姐妹们,大家好! 我是准时上线更新代码+讲故事的程序媛小姐姐! 整理了一款超火的『隐藏表白代码』希 ...
程序员如何用“心“表白（结尾附源码）
写在前面:博主是一只经过实战开发历练后投身培训事业的"小山猪",昵称取自动画片<狮子王>中的"彭彭",总是以乐观.积极的心态对待周边的事物.本人的技 ...

html爱情表白神器，回忆纪念册(附源码)