【博主推荐】html好看的爱心告白源码

ゞ浴缸里的玫瑰 2023-09-28 17:52 7阅读 0赞

#### html好看的爱心告白源码 ####

*  文章列表
 *   *  前言
     *  界面动态效果
     *  主导航爱心
     *  列1\_(1-4)
     *  列2\_(1-6）
     *  列3\_(1-7)
     *  列4\_(1-7)
     *  列5\_(1-7)
     *  列6\_(1-7)
     *  列7\_(1-7)
     *  列8\_(1-6)
     *  列9\_(1-4)
     *  源码下载

## 文章列表 ##

### 前言 ###

html好看的爱心告白源码，55个卡片汇聚爱心，每个卡片的爱情简言。酷炫的界面效果，精致的排版。下面咋们具体看看这个界面代码拆分。  
`HTML + JS +CSS`

### 界面动态效果 ###

整体页面的动态效果  
操作方式1，快捷键 上下左右，可切换卡片  
操作方式2，快捷键 ESC，可切换主导航，爱心汇集  
操作方式3，鼠标滚轮，可切换卡片  
操作方式4，点击右下角爱心图标

html好看的告白源码

### 主导航爱心 ###

功能1，每个界面采用卡片绘制爱心；  
功能2，右上角背景音乐暂停和播放功能；  
功能3，点击每个卡片，可以放大查看内容。

![请添加图片描述][029cfe00dd0140b1809eb85b0be8f17e.png]

### 列1\_(1-4) ###

> 左标题，右背景音乐控制器，下边粉色操作提示，右边爱心导航。

<div id="/section-1/page-1" class="ft-page page-1" data-id="page-1">
    	<p class="mytext"><span id="text-75"   >白风夕</span> ❤ <span id="text-76"  >黑丰息</span> <span id="text-77"  >一生一世</span></p>
    	<p class="text2"><span>❤亲爱的,用键盘上下左右按键(鼠标滚轮)操作,来看我对你的告白❤</span></p>
    </div>

![在这里插入图片描述][694db77848cd4ef9b805c62909d2887c.png]

### 列2\_(1-6） ###

> 上边是爱情宣言，下边是爱情图片

<div id="/section-2/page-6" class="ft-page page-10" data-id="page-6">
    	<p id="text-9"  >一个人爱上你的原因，并不是你有多好，而是你对他有多重要。</p>
    	<img src="img/gif/love6.gif" style="">
    </div>

![在这里插入图片描述][9cfe1c1e344246bbb7a9f5a19394831a.png]

### 列3\_(1-7) ###

> 上边是爱情宣言，下边是爱情图片

<div id="/section-3/page-3" class="ft-page page-13" data-id="page-3">
    <p id="text-13"  >如果彼此出现早一点，也许就不会和另一个人十指紧扣。</p>
    <img src="img/gif/love7.gif" style="">
    </div>

![在这里插入图片描述][4be797be6d6e4171a708a2769f50676e.png]

### 列4\_(1-7) ###

> 上边是爱情宣言，下边是爱情图片

<div id="/section-4/page-2" class="ft-page page-19" data-id="page-2">
    	<p id="text-21"  >不管是爱还是恨，因为掏心掏肺的付出过，因为深深的在乎过，所以刻骨铭心。</p>
    	<img src="img/gif/love11.gif" style="">
    </div>

![在这里插入图片描述][28a0f836645a4d7e8173340b4e0fabe1.png]

### 列5\_(1-7) ###

> 上边是爱情宣言，下边是主题七个字

<div id="/section-5/page-1" class="ft-page page-25" data-id="page-1">
    	<p><span id="text-27"  >看一个女人是否真的爱你，要看你在饥寒交迫的时候</span></p>
    	<div class="fontstyle">致</div>
    </div>

![在这里插入图片描述][01a0e2dd356146e6a0e10c30592ee937.png]

### 列6\_(1-7) ###

> 上边是爱情宣言，下边是爱情图片

<div id="/section-6/page-6" class="ft-page page-37" data-id="page-6">
    	<p id="text-42"  >恨不得把他挂在嘴上招摇过市</p>
    	<img src="img/gif/love6.gif" style="">
    </div>

![在这里插入图片描述][257032e0beea46b4beed2b39ccef6f1c.png]

### 列7\_(1-7) ###

> 上边是爱情宣言，下边是爱情图片

<div id="/section-7/page-3" class="ft-page page-41" data-id="page-3">
    	<p id="text-46"  > 那就谁也不舍得说了</p>
    	<img src="img/gif/love10.gif" style="">
    </div>

![在这里插入图片描述][1ba32ae068634185a880eecbda633261.png]

### 列8\_(1-6) ###

> 上边是爱情宣言，下边是爱情图片

<div id="/section-8/page-3" class="ft-page page-48" data-id="page-3">
    	<h3>
    	<span id="text-62"  >你看街上依旧繁花似锦</span>
    	<span id="text-63"  >阳光依然璀璨温柔</span>
    	</h3>
    	<img src="img/gif/love6.gif" style="margin-top:10rem;text-align:center;">
    </div>

![在这里插入图片描述][1ecd48407d6d430fa80d2a1caa159189.png]

### 列9\_(1-4) ###

> 上边是爱情宣言，下边是爱情图片

<div id="/section-9/page-4" class="ft-page page-55 right-img" data-id="page-4">
    	<p class="text">
    		<span id="text-73"  >亲爱的：我不敢说我是世界上最爱你的人，但我敢说你是我最用心爱的人。</span><br />
    		<br />
    		<br />
    	</p>			
    		<div class="fontstyle22"> ❤ 按【ESC】键，是我对你所有的心意</div>	
    </div>

![在这里插入图片描述][131b1f73d4404f08b0340a598dc16d82.png]

### 源码下载 ###

[【博主推荐】html好看的爱心告白源码 点击下载][html_]

[029cfe00dd0140b1809eb85b0be8f17e.png]: https://img-blog.csdnimg.cn/029cfe00dd0140b1809eb85b0be8f17e.png
[694db77848cd4ef9b805c62909d2887c.png]: https://img-blog.csdnimg.cn/694db77848cd4ef9b805c62909d2887c.png
[9cfe1c1e344246bbb7a9f5a19394831a.png]: https://img-blog.csdnimg.cn/9cfe1c1e344246bbb7a9f5a19394831a.png
[4be797be6d6e4171a708a2769f50676e.png]: https://img-blog.csdnimg.cn/4be797be6d6e4171a708a2769f50676e.png
[28a0f836645a4d7e8173340b4e0fabe1.png]: https://img-blog.csdnimg.cn/28a0f836645a4d7e8173340b4e0fabe1.png
[01a0e2dd356146e6a0e10c30592ee937.png]: https://img-blog.csdnimg.cn/01a0e2dd356146e6a0e10c30592ee937.png
[257032e0beea46b4beed2b39ccef6f1c.png]: https://img-blog.csdnimg.cn/257032e0beea46b4beed2b39ccef6f1c.png
[1ba32ae068634185a880eecbda633261.png]: https://img-blog.csdnimg.cn/1ba32ae068634185a880eecbda633261.png
[1ecd48407d6d430fa80d2a1caa159189.png]: https://img-blog.csdnimg.cn/1ecd48407d6d430fa80d2a1caa159189.png
[131b1f73d4404f08b0340a598dc16d82.png]: https://img-blog.csdnimg.cn/131b1f73d4404f08b0340a598dc16d82.png
[html_]: https://download.csdn.net/download/weixin_43151418/86771584