html实现爱情告白(附源码)

文章目录

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

**
html实现爱情告白(附源码)
**html实现爱情告白源码，通过九个模块界面展现自己的爱情告白，主界面通过翻书模式，查阅爱情告白主题，上下滑动切换界面，查看爱情告白内容。

1.设计来源

html实现爱情告白，爱情告白是主题，所以就用了九个界面来进行了告白，把你想说的都写上吧。天长地久，可不就感动了那个人。

1.1 主界面

爱情告白主题，书本形式展开内容，里面有九个界面的主题介绍。具体体现方式见下面动态效果。

请添加图片描述

1.2 执子之手，与子偕老

执子之手，与子偕老：只要有一丝希望我就绝不放弃希望!我就是一个不轻易认输!不轻易放弃希望的人!所以我一直在拼搏在努力!自从与你相爱以来我就有了梦想!你就是我最大的梦想! 具体体现方式见下面动态效果。

请添加图片描述

1.3 死生契阔，与子成说

死生契阔，与子成说：牵挂是一颗心对另一颗心的深情惦记，一缕相思一种幸福一份温情，醉了两人的心扉，绽放了两朵心花。牵挂是刻骨铭心的思念，就象我漫长的等待。 具体体现方式见下面动态效果。

请添加图片描述

1.4 生当复来归，死当长相思

生当复来归，死当长相思：请你想起我的名字，在你缺少安慰的时候，我要你记得，我就是那个时刻惦念你的人，我就是那个，关心你的人，我就是喜欢你的人。 具体体现方式见下面动态效果。

请添加图片描述

1.5 自君之出矣，明镜暗不治

自君之出矣，明镜暗不治：爱像冬日的一缕阳光，温暖你冰凉的心灵;爱像沙漠里的甘泉，滋润你干涸的心田;爱像一盏明灯，引导迷茫的你走向正确的道路。让爱永驻你的每一天! 具体体现方式见下面动态效果。

请添加图片描述

1.6 思君如流水，何有穷已时

思君如流水，何有穷已时：时间在指尖中流逝，万物在雨露下滋长，星辰在昼夜里交替，我们在理想上行走。快乐与困苦交织，新生伴随老死，让我们珍惜眼前，相拥永远。 具体体现方式见下面动态效果。

请添加图片描述

1.7 南有乔木，不可休思

南有乔木，不可休思：爱情是爱与爱的沟通，也是情与情的呼应。不仅仅是经典的“三字告白”，更是默默的付出和真诚的关心。它无须形影相随，却要求心心相印。 具体体现方式见下面动态效果。

请添加图片描述

1.8 汉有游女，不可求思

汉有游女，不可求思：我抛除一切杂念，用真情在心里铸成一座堡垒，把我对你的爱放到了里边。我对堡垒做了真空处理，使我对你的爱时刻保鲜，保质期是我的一生。 具体体现方式见下面动态效果。

请添加图片描述

1.9 思君如明烛，煎心且衔泪

思君如明烛，煎心且衔泪：我们的爱情，像逗号一样走走停停，像分号一样冗长拖沓，像省略号一样深沉忧郁……今天忍不住发出一个大大的问号，你能否给出一个痛快的感叹号! 具体体现方式见下面动态效果。

请添加图片描述

2.效果和源码

2.1 动态效果

下面视频是界面的完整效果，界面分为九个版块，寓意天长地久，主版块简单描述了九个版块的信息。

html实现爱情告白

2.2 源代码

这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。

<!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" type="text/css" href="./css/supersized.css"/>
    
    <link rel="stylesheet" href="./js/swiper-bundle.min.css" />
    <link rel="stylesheet" href="./css/xcLeigh.css" />
    
  </head> 

 <body oncontextmenu="return false;" onselectstart="return false;" unselectable="on" ondragstart="return false;">
  <div id="supersized">
  </div> 
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide bg1">
          <div class="loveFont loveTitle">
            爱情告白
          </div>
          <div style="position: absolute; width: 100%; height: calc(100% - 160px);">
            <iframe src="loveNote.html" style="width: 100%; height:100%; border:0px; overflow: hidden;"></iframe>
          </div>
          <div class="loveFont1 loveTitle1">
            上下拖动查看，或者点击右边圆圈圈。
          </div>
        </div>
        <div class="swiper-slide bg2">
          <div class="loveFont loveTitle">
            执子之手，与子偕老
          </div>
          <div style="position: absolute; width: 100%; height: calc(100% - 100px);">
            <div id="divLoveBK" class="divLoveBK">
              <div style="padding: 4% 6%; color: white; text-align: left;"><span id="spanTitle" style="color:orange;">亲爱的,Girl：</span></div>
              <div class="spanLink" style="padding: 0% 8%; text-align: left;">
                &nbsp;&nbsp;&nbsp;&nbsp;只要有一丝希望我就绝不放弃希望!我就是一个不轻易认输!不轻易放弃希望的人!所以我一直在拼搏在努力!自从与你相爱以来我就有了梦想!你就是我最大的梦想!
              </div>
              <div style="padding: 4% 6%; text-align: right; color: white;  padding-right: 10%;">
                <span id="spanEnd" style="color: rgb(39, 41, 92);">Boy 书</span>
              </div>
              <div style="text-align: center;">
                <a href="https://blog.csdn.net/weixin_43151418/article/details/127814650" 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/details/126099643" target="_blank">爱心告白</a> |
                <a href="https://blog.csdn.net/weixin_43151418/article" target="_blank">定制告白</a>
              </div>
            </div>
          </div>
          <div class="loveFont1 loveTitle1">
            上下拖动查看，或者点击右边圆圈圈。
          </div>
        </div>
        <div class="swiper-slide bg3">
          <div class="loveFont loveTitle">
            死生契阔，与子成说
          </div>
          <div style="position: absolute; width: 100%; height: calc(100% - 100px);">
            <div id="divLoveBK" class="divLoveBK">
              <div style="padding: 4% 6%; color: white; text-align: left;"><span id="spanTitle" style="color:orange;">亲爱的,Girl：</span></div>
              <div class="spanLink" style="padding: 0% 8%; text-align: left;">
                &nbsp;&nbsp;&nbsp;&nbsp;牵挂是一颗心对另一颗心的深情惦记，一缕相思一种幸福一份温情，醉了两人的心扉，绽放了两朵心花。牵挂是刻骨铭心的思念，就象我漫长的等待。
              </div>
              <div style="padding: 4% 6%; text-align: right; color: white;  padding-right: 10%;">
                <span id="spanEnd" style="color: rgb(39, 41, 92);">Boy 书</span>
              </div>
              <div style="text-align: center;">
                <a href="https://blog.csdn.net/weixin_43151418/article/details/127814650" 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/details/126099643" target="_blank">爱心告白</a> |
                <a href="https://blog.csdn.net/weixin_43151418/article" target="_blank">定制告白</a>
              </div>
            </div>
          </div>
          <div class="loveFont1 loveTitle1">
            上下拖动查看，或者点击右边圆圈圈。
          </div>
        </div>
        <div class="swiper-slide bg4">
          <div class="loveFont loveTitle">
            生当复来归，死当长相思
          </div>
          <div style="position: absolute; width: 100%; height: calc(100% - 100px);">
            <div id="divLoveBK" class="divLoveBK">
              <div style="padding: 4% 6%; color: white; text-align: left;"><span id="spanTitle" style="color:orange;">亲爱的,Girl：</span></div>
              <div class="spanLink" style="padding: 0% 8%; text-align: left;">
                &nbsp;&nbsp;&nbsp;&nbsp;请你想起我的名字，在你缺少安慰的时候，我要你记得，我就是那个时刻惦念你的人，我就是那个，关心你的人，我就是喜欢你的人。
              </div>
              <div style="padding: 4% 6%; text-align: right; color: white;  padding-right: 10%;">
                <span id="spanEnd" style="color: rgb(39, 41, 92);">Boy 书</span>
              </div>
              <div style="text-align: center;">
                <a href="https://blog.csdn.net/weixin_43151418/article/details/127814650" 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/details/126099643" target="_blank">爱心告白</a> |
                <a href="https://blog.csdn.net/weixin_43151418/article" target="_blank">定制告白</a>
              </div>
            </div>
          </div>
          <div class="loveFont1 loveTitle1">
            上下拖动查看，或者点击右边圆圈圈。
          </div>
        </div>
        <div class="swiper-slide bg5">
          <div class="loveFont loveTitle">
            自君之出矣，明镜暗不治
          </div>
          <div style="position: absolute; width: 100%; height: calc(100% - 100px);">
            <div id="divLoveBK" class="divLoveBK">
              <div style="padding: 4% 6%; color: white; text-align: left;"><span id="spanTitle" style="color:orange;">亲爱的,Girl：</span></div>
              <div class="spanLink" style="padding: 0% 8%; text-align: left;">
                &nbsp;&nbsp;&nbsp;&nbsp;爱像冬日的一缕阳光，温暖你冰凉的心灵;爱像沙漠里的甘泉，滋润你干涸的心田;爱像一盏明灯，引导迷茫的你走向正确的道路。让爱永驻你的每一天!
              </div>
              <div style="padding: 4% 6%; text-align: right; color: white;  padding-right: 10%;">
                <span id="spanEnd" style="color: rgb(39, 41, 92);">Boy 书</span>
              </div>
              <div style="text-align: center;">
                <a href="https://blog.csdn.net/weixin_43151418/article/details/127814650" 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/details/126099643" target="_blank">爱心告白</a> |
                <a href="https://blog.csdn.net/weixin_43151418/article" target="_blank">定制告白</a>
              </div>
            </div>
          </div>
          <div class="loveFont1 loveTitle1">
            上下拖动查看，或者点击右边圆圈圈。
          </div>
        </div>
        <div class="swiper-slide bg6">
          <div class="loveFont loveTitle">
            思君如流水，何有穷已时
          </div>
          <div style="position: absolute; width: 100%; height: calc(100% - 100px);">
            <div id="divLoveBK" class="divLoveBK">
              <div style="padding: 4% 6%; color: white; text-align: left;"><span id="spanTitle" style="color:orange;">亲爱的,Girl：</span></div>
              <div class="spanLink" style="padding: 0% 8%; text-align: left;">
                &nbsp;&nbsp;&nbsp;&nbsp;时间在指尖中流逝，万物在雨露下滋长，星辰在昼夜里交替，我们在理想上行走。快乐与困苦交织，新生伴随老死，让我们珍惜眼前，相拥永远。
              </div>
              <div style="padding: 4% 6%; text-align: right; color: white;  padding-right: 10%;">
                <span id="spanEnd" style="color: rgb(39, 41, 92);">Boy 书</span>
              </div>
              <div style="text-align: center;">
                <a href="https://blog.csdn.net/weixin_43151418/article/details/127814650" 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/details/126099643" target="_blank">爱心告白</a> |
                <a href="https://blog.csdn.net/weixin_43151418/article" target="_blank">定制告白</a>
              </div>
            </div>
          </div>
          <div class="loveFont1 loveTitle1">
            上下拖动查看，或者点击右边圆圈圈。
          </div>
        </div>
        <div class="swiper-slide bg7">
          <div class="loveFont loveTitle">
            南有乔木，不可休思
          </div>
          <div style="position: absolute; width: 100%; height: calc(100% - 100px);">
            <div id="divLoveBK" class="divLoveBK">
              <div style="padding: 4% 6%; color: white; text-align: left;"><span id="spanTitle" style="color:orange;">亲爱的,Girl：</span></div>
              <div class="spanLink" style="padding: 0% 8%; text-align: left;">
                &nbsp;&nbsp;&nbsp;&nbsp;爱情是爱与爱的沟通，也是情与情的呼应。不仅仅是经典的“三字告白”，更是默默的付出和真诚的关心。它无须形影相随，却要求心心相印。
              </div>
              <div style="padding: 4% 6%; text-align: right; color: white;  padding-right: 10%;">
                <span id="spanEnd" style="color: rgb(39, 41, 92);">Boy 书</span>
              </div>
              <div style="text-align: center;">
                <a href="https://blog.csdn.net/weixin_43151418/article/details/127814650" 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/details/126099643" target="_blank">爱心告白</a> |
                <a href="https://blog.csdn.net/weixin_43151418/article" target="_blank">定制告白</a>
              </div>
            </div>
          </div>
          <div class="loveFont1 loveTitle1">
            上下拖动查看，或者点击右边圆圈圈。
          </div>
        </div>
        <div class="swiper-slide bg8">
          <div class="loveFont loveTitle">
            汉有游女，不可求思
          </div>
          <div style="position: absolute; width: 100%; height: calc(100% - 100px);">
            <div id="divLoveBK" class="divLoveBK">
              <div style="padding: 4% 6%; color: white; text-align: left;"><span id="spanTitle" style="color:orange;">亲爱的,Girl：</span></div>
              <div class="spanLink" style="padding: 0% 8%; text-align: left;">
                &nbsp;&nbsp;&nbsp;&nbsp;我抛除一切杂念，用真情在心里铸成一座堡垒，把我对你的爱放到了里边。我对堡垒做了真空处理，使我对你的爱时刻保鲜，保质期是我的一生。
              </div>
              <div style="padding: 4% 6%; text-align: right; color: white;  padding-right: 10%;">
                <span id="spanEnd" style="color: rgb(39, 41, 92);">Boy 书</span>
              </div>
              <div style="text-align: center;">
                <a href="https://blog.csdn.net/weixin_43151418/article/details/127814650" 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/details/126099643" target="_blank">爱心告白</a> |
                <a href="https://blog.csdn.net/weixin_43151418/article" target="_blank">定制告白</a>
              </div>
            </div>
          </div>
          <div class="loveFont1 loveTitle1">
            上下拖动查看，或者点击右边圆圈圈。
          </div>
        </div>
        <div class="swiper-slide bg9">
          <div class="loveFont loveTitle">
            思君如明烛，煎心且衔泪
          </div>
          <div style="position: absolute; width: 100%; height: calc(100% - 100px);">
            <div id="divLoveBK" class="divLoveBK">
              <div style="padding: 4% 6%; color: white; text-align: left;"><span id="spanTitle" style="color:orange;">亲爱的,Girl：</span></div>
              <div class="spanLink" style="padding: 0% 8%; text-align: left;">
                &nbsp;&nbsp;&nbsp;&nbsp;我们的爱情，像逗号一样走走停停，像分号一样冗长拖沓，像省略号一样深沉忧郁……今天忍不住发出一个大大的问号，你能否给出一个痛快的感叹号!
              </div>
              <div style="padding: 4% 6%; text-align: right; color: white;  padding-right: 10%;">
                <span id="spanEnd" style="color: rgb(39, 41, 92);">Boy 书</span>
              </div>
              <div style="text-align: center;">
                <a href="https://blog.csdn.net/weixin_43151418/article/details/127814650" 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/details/126099643" target="_blank">爱心告白</a> |
                <a href="https://blog.csdn.net/weixin_43151418/article" target="_blank">定制告白</a>
              </div>
            </div>
          </div>
          <div class="loveFont1 loveTitle1">
            …内容已到结尾，可我们的爱情长跑还在进行中…
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
 </body>
 <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>
 <script src="./js/swiper-bundle.min.js"></script>
</html>

源码下载

html实现爱情告白(附源码）点击下载

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

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

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

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

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

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

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

标签： html 前端 javascript

本文转载自: https://blog.csdn.net/weixin_43151418/article/details/127964115
版权归原作者 xcLeigh 所有，如有侵权，请联系我们删除。

html实现爱情告白(附源码)

文章目录

1.设计来源

1.1 主界面

1.2 执子之手，与子偕老

1.3 死生契阔，与子成说

1.4 生当复来归，死当长相思

1.5 自君之出矣，明镜暗不治

1.6 思君如流水，何有穷已时

1.7 南有乔木，不可休思

1.8 汉有游女，不可求思

1.9 思君如明烛，煎心且衔泪

2.效果和源码

2.1 动态效果

2.2 源代码

源码下载

发表评论

“html实现爱情告白(附源码)”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航