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

这篇具有很好参考价值的文章主要介绍了html爱情表白神器,回忆纪念册(附源码)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

作者:xcLeigh
文章地址:https://blog.csdn.net/weixin_43151418/article/details/131022313


html爱情表白神器,回忆纪念册 html爱情表白神器,用酸甜苦辣的记忆,翻动心中的荷尔蒙,html翻书效果源码,html书本翻页效果源码,html电子书效果,酷炫的界面动画效果,精致细化的布局,背景星空之夜,每一页都是高清壁纸。

1.设计来源

1.1 主界面

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

  • 背景音乐:我的梦(支持改成自己喜欢的音乐)
  • 背景:夜下星空
  • 背景文字:十句名言(支持改成自己喜欢的文字)
  • 主题效果:翻书特效
  • 页码:8 页(支持自己扩展)

    回忆纪念册,记录双方的回忆瞬间,永久保存,情人节、生日、纪念日,可以给彼此温馨回忆。快来动手制作自己的 回忆纪念册

1.2 相关界面

    每页不同的效果,可以复用,也可以在此基础上扩展,打造属于自己的回忆纪念册 ,具体效果,见下面视频展示效果。

html爱情表白神器,回忆纪念册(附源码)
页码 2-3

html爱情表白神器,回忆纪念册(附源码)
页码 4-5

html爱情表白神器,回忆纪念册(附源码)
页码 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爱情表白神器,回忆纪念册(附源码)


     💞 关注博主 带你实现畅游前后端

     🏰 加入社区 带你体验马航不孤单

     💯 神秘个人简介 带你体验不一样得介绍

     🎀 酷炫邀请函 带你体验高大上得邀请


     ① 🉑提供云服务部署(有自己的阿里云);
     ② 🉑提供前端、后端、应用程序、H5、小程序、公众号等相关业务;
     如🈶合作请联系我,期待您的联系。
    :本文撰写于CSDN平台,作者:xcLeigh(所有权归作者所有),https://blog.csdn.net/weixin_43151418,如果相关下载没有跳转,请查看这个地址,相关链接没有跳转,皆是抄袭本文,转载请备注本文原地址。


     亲,码字不易,动动小手,欢迎 点赞 ➕ 收藏,如 🈶 问题请留言(评论),博主看见后一定及时给您答复,💌💌💌


原文地址:https://blog.csdn.net/weixin_43151418/article/details/131022313(防止抄袭,原文地址不可删除)文章来源地址https://www.toymoban.com/news/detail-470095.html

到了这里,关于html爱情表白神器,回忆纪念册(附源码)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包