html实现爱情纪念册(附源码)

xcLeigh

已于 2022-11-14 11:39:56 修改

阅读量2k

点赞数 17

分类专栏：资源源码 HTML5实战案例文章标签： html 前端 javascript

于 2022-11-11 23:01:50 首次发布

BY xcSharp@126.com

本文链接：https://blog.csdn.net/weixin_43151418/article/details/127814650

版权

HTML5实战案例同时被 2 个专栏收录

127 篇文章 106 订阅

订阅专栏

资源源码

112 篇文章 93 订阅

订阅专栏

文章目录

1.设计思路
2.效果展示源码
- 2.1 效果展示
- 2.2 代码
源码下载

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

html实现爱情纪念册，爱心纪念册，以中间千万个火热的爱心，汇聚成一个大爱心，把双方名字刻在正中心，以背景图片为爱情的纪念测，可以放置两个人的爱情图片，四个角落是心动的感觉，分为蜜语、情话、相约、誓言四个版块，主要说出你的甜言蜜语。

1.设计思路

1.1 主界面

以中间千万个火热的爱心，汇聚成一个大爱心，把双方名字刻在正中心，以背景图片为爱情的纪念测，可以放置两个人的爱情图片，四个角落是心动的感觉，分为蜜语、情话、相约、誓言四个版块，主要说出你的甜言蜜语，中间的H ❤ B是用的名字首字母，可以自定义配置。

请添加图片描述

1.2 情话界面

爱情纪念册，情话界面，以致信、内容、署名三个版块文字组成，可以自定义配置文字内容，点击藏进心里就隐藏这个版块。

请添加图片描述

1.3 蜜语界面

爱情纪念册，蜜语界面，以致信、内容、署名三个版块文字组成，可以自定义配置文字内容，点击藏进心里就隐藏这个版块。

请添加图片描述

1.4 誓言界面

爱情纪念册，誓言界面，以致信、内容、署名三个版块文字组成，可以自定义配置文字内容，点击藏进心里就隐藏这个版块。

请添加图片描述

1.5 相约界面

爱情纪念册，相约界面，以致信、内容、署名三个版块文字组成，可以自定义配置文字内容，点击藏进心里就隐藏这个版块。
请添加图片描述

2.效果展示源码

2.1 效果展示

html实现爱情纪念册

2.2 代码

此代码是主要界面代码，其他代码见源码下载，里面又详细说明和使用步骤，还有一些优质的代码资源。

<!DOCTYPE html>
<html>
  <head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" />  -->
    <link rel="icon" type="image/png" href="img/favicon.ico" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
    <title>xcLeigh - 爱情纪念册</title> 
    <link rel="stylesheet" href="css/xcleigh.css" />  
    <link rel="stylesheet" type="text/css" href="./css/supersized.css"/>
  </head> 

 <body oncontextmenu="return false;" onselectstart="return false;" unselectable="on" ondragstart="return false;">
  <div id="supersized">
    <div class="loveFont loveTitle">
      爱情纪念册
    </div>
    <div class="loveFont lovebottom">
      黑丰息 ❤ 白风夕<br/>
      执子之手，与子偕老
    </div>
  </div> 
  <canvas id="loveXcleigh"></canvas>
  <div class="loveName loveFont">
    <span style="color:yellow;">H</span> <span>❤</span> <span style="color:yellow;">B</span>
  </div>

  <div class="divLeft">
    <div  style="position:absolute;left:0;bottom:0; width:80px;height:80px;text-align:center;line-height:80px;color:#0F85F4;z-index:88; cursor: pointer;">
    <a href="javascript:void(1);" onclick="changeLove(1);" style="text-decoration:none; font-weight:bold;">密语</a>
    </div>
      <div class='classScale' style='display:flex; justify-content: center; align-items: center; width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
      </div>
      <div class='classScale1' style='position:relative; top: -80px;width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
      </div>
    </div>
    <div class="divRight">
    <div  style="position:absolute;left:0;bottom:0; width:80px;height:80px;text-align:center;line-height:80px;color:#0BABC4;z-index:88;">
      <a href="javascript:void(0);" onclick="changeLove(2);" style="text-decoration:none; font-weight:bold">情话</a>
    </div>
      <div class='classScale' style='display:flex; justify-content: center; align-items: center; width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
      </div>
      <div class='classScale1' style='position:relative; top: -80px;width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
      </div>
    </div>
    <div class="divLeft1">
    <div  style="position:absolute;left:0;bottom:0; width:80px;height:80px;text-align:center;line-height:80px;color:red;z-index:88;">
      <a href="javascript:void(0);" onclick="changeLove(3);" style="text-decoration:none; font-weight:bold">誓言</a>
    </div>
      <div class='classScale' style='display:flex; justify-content: center; align-items: center; width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
      </div>
      <div class='classScale1' style='position:relative; top: -80px;width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
      </div>
    </div>
    <div class="divRight1">
    <div  style="position:absolute;left:0;bottom:0; width:80px;height:80px;text-align:center;line-height:80px;color:orange;z-index:88;">
      <a href="javascript:void(0);" onclick="changeLove(4);" style="text-decoration:none; font-weight:bold;">相约</a>
    </div>
      <div class='classScale' style='display:flex; justify-content: center; align-items: center; width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
      </div>
      <div class='classScale1' style='position:relative; top: -80px;width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
      </div>
    </div>

    
    <div id="divLoveBKbg" class="divLoveBKbg" style="display: none;">
      </div>
    <div id="divLoveBK" class="divLoveBK" style="display: none;">
      <div style="padding: 4% 6%; color: white;"><span id="spanTitle">亲爱的：</span><span class="spanTitle" onclick="collectLove();">藏进心里</span></div>
      <div style="padding: 0% 8%; color: white;"><span id="spanContent">喜欢你</span></div>
      <div style="padding: 4% 6%; text-align: right; color: white;  padding-right: 10%;"><span id="spanEnd">黑丰息 笔</span></div>
      <div style="text-align: center;">
        <a href="https://blog.csdn.net/weixin_43151418/article/details/126099643" target="_blank">浪漫告白</a> |
        <a href="https://blog.csdn.net/weixin_43151418/article/details/124970985" target="_blank">爱心告白</a> |
        <a href="https://blog.csdn.net/weixin_43151418/article" target="_blank">定制告白</a>
      </div>
    </div>
 </body>
 <script src="js/xcleigh.js" type="text/javascript"></script>
 <script type="text/javascript" src="./js/jquery-1.8.2.min.js"></script>
 <script type="text/javascript" src="./js/supersized-init.js"></script>
 <script type="text/javascript" src="./js/supersized.3.2.7.min.js"></script>
</html>

源码下载

html实现爱情纪念册(源码) 点击下载

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

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

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

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

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

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

原文地址：https://blog.csdn.net/weixin_43151418/article/details/127814650（防止抄袭，原文地址不可删除）

xcLeigh

关注

17
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
12
评论
html实现爱情纪念册(附源码)

html实现爱情纪念册，爱心纪念册，以中间千万个火热的爱心，汇聚成一个大爱心，把双方名字刻在正中心，以背景图片为爱情的纪念测，可以放置两个人的爱情图片，四个角落是心动的感觉，分为蜜语、情话、相约、誓言四个版块，主要说出你的甜言蜜语。
复制链接

扫一扫