【博主推荐】HTML5实现520表白、情人节表白模板源码

news2024/11/24 16:17:12

文章目录

  • 1.设计来源
    • 1.1 表白首页
    • 1.2 甜蜜瞬间1
    • 1.3 甜蜜瞬间2
    • 1.4 甜蜜瞬间3
    • 1.5 甜蜜瞬间4
    • 1.6 甜蜜瞬间5
    • 1.7 甜蜜瞬间6
    • 1.8 永久珍藏
  • 2.效果和源码
    • 2.1 页面动态效果
    • 2.2 页面源代码
    • 2.3 源码目录
    • 2.4 更多为爱表白源码
  • 3.源码下载地址

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

HTML5实现520表白、情人节表白模板源码，520告白程序，情人节表白程序，html爱情表白，html记事本，html表白日记，html书中的爱情，html爱情日记，为爱打造属于自己的爱情小屋，实现书本翻页效果，写上自己的爱情表白日记，每一帧记录彼此的甜蜜瞬间，每一帧都是彼此为爱付出的幸福。背景夜空下的萤火虫，诺言的背景音乐，漂浮的爱情誓言文字，独一份的浪漫，快来为你那个他（她），建立属于自己的爱情纪念册。代码上手简单，代码独立，可以直接使用。也可直接预览效果。

1.设计来源

    5月20日是公历一年中的第140天（闰年第141天），离全年结束还有225天。因为“520”谐音“我爱你”，所以每年的5月20日也成了数以亿万的网友们自发兴起的节日——网络情人节。以爱为名，有此系统。

1.1 表白首页

    表白首页，就是界面刚进入的效果，背景夜空中的心。黑夜里你就是我的光，萤火虫是你我的桥梁，这里记录着我们的过往，酸甜苦辣咸。每一帧都是满满的回忆。

  • 点击页面任何地方会出现心动的爱心 ，五颜六色的爱心，满满的爱，下面的视频效果，可以看到。
  • 鼠标样式为心动的爱心 ，下面的视频效果，可以看到。
  • 右上角为背景音乐，歌曲：诺言，对应你我的诺言。
  • 点击右侧开启520，每一帧都有一个彼此的甜蜜瞬间。
  • 内置11个封皮图片风格，可随意切换。
封皮效果1

在这里插入图片描述

封皮效果2

在这里插入图片描述

封皮效果3

在这里插入图片描述

封皮效果4

在这里插入图片描述

封皮效果5

在这里插入图片描述

封皮效果6

在这里插入图片描述

封皮效果7

在这里插入图片描述

封皮效果8

在这里插入图片描述

封皮效果9

在这里插入图片描述

封皮效果10

在这里插入图片描述

封皮效果11

在这里插入图片描述

1.2 甜蜜瞬间1

    甜蜜瞬间1，分为两种方式展示纪念图片，并加以文字描述，格式可以自定义，文字背景可以随意调动。可以支持放多张照片，也可以在此基础上进行超链接，进入全局图片库，可以根据自己的喜好变动。
    点击日记内容的左边，往前翻页，点击日记内容的右边往后翻页。

在这里插入图片描述

1.3 甜蜜瞬间2

    甜蜜瞬间2，分为两种方式展示纪念图片，并加以文字描述，格式可以自定义，文字背景可以随意调动。可以支持放多张照片，也可以在此基础上进行超链接，进入全局图片库，可以根据自己的喜好变动。
    点击日记内容的左边，往前翻页，点击日记内容的右边往后翻页。

在这里插入图片描述

1.4 甜蜜瞬间3

    甜蜜瞬间3，分为两种方式展示纪念图片，并加以文字描述，格式可以自定义，文字背景可以随意调动。可以支持放多张照片，也可以在此基础上进行超链接，进入全局图片库，可以根据自己的喜好变动。
    点击日记内容的左边，往前翻页，点击日记内容的右边往后翻页。

在这里插入图片描述

1.5 甜蜜瞬间4

    甜蜜瞬间4，分为两种方式展示纪念图片，并加以文字描述，格式可以自定义，文字背景可以随意调动。可以支持放多张照片，也可以在此基础上进行超链接，进入全局图片库，可以根据自己的喜好变动。
    点击日记内容的左边，往前翻页，点击日记内容的右边往后翻页。

在这里插入图片描述

1.6 甜蜜瞬间5

    甜蜜瞬间5，分为两种方式展示纪念图片，并加以文字描述，格式可以自定义，文字背景可以随意调动。可以支持放多张照片，也可以在此基础上进行超链接，进入全局图片库，可以根据自己的喜好变动。
    点击日记内容的左边，往前翻页，点击日记内容的右边往后翻页。

在这里插入图片描述

1.7 甜蜜瞬间6

    甜蜜瞬间6，分为两种方式展示纪念图片，并加以文字描述，格式可以自定义，文字背景可以随意调动。可以支持放多张照片，也可以在此基础上进行超链接，进入全局图片库，可以根据自己的喜好变动。
    点击日记内容的左边，往前翻页，点击日记内容的右边往后翻页。

在这里插入图片描述

1.8 永久珍藏

    永久珍藏，最后，左边为日记的结尾封皮，右边为漂浮的文字，演示渐变，可以自己灵活定义。
    点击日记内容的左边，往前翻页。

在这里插入图片描述

2.效果和源码

在这里插入图片描述

2.1 页面动态效果

    这里是完整的效果演示，可在此代码基础上更加完善功能，支持扩展自己的风格，可以删减内容，打造属于自己的爱情表白神器。

HTML5实现520表白、情人节表白模板源码

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>我的爱情日记</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" href="./css/style.css">
	<script src="js/prefixfree.min.js"></script>
	<link href="images/favicon.png" rel="icon">
</head>
<body οncοntextmenu="return false" οndragstart="return false" onselectstart="return false" οnselect="document.selection.empty()" οncοpy="document.selection.empty()" onbeforecopy="return false" οnmοuseup="document.selection.empty()">
	<div>
		<iframe class="frameBg" src="bg/index.html"></iframe>
		<div id="maic">
			<img id="imgdh" src="images/music.gif">
			<img id="img" src="images/music_off.png">
			<audio src="images/marshmallow.mp3" autoplay loop></audio>
		</div>
	</div>
	<div>
		<div class="myfont" style="width: 50%;">
			<span >洛希极限</span>，至近至远都不好，<br /><br />两人保持着适当的距离，彼此吸引，相互欣赏最好。
		</div>
		<div class="myfont" style="width: 50%;">
			<span>与你相爱</span>，幸福握在交缠指缝间。<br /><br />遇见了你，是我一辈子的幸运。
		</div>
	</div>
	<div class="scene">
	  <article class="book">
		<section class="page active">
		<div class="front loveimg">
			<h1>我的爱情日记</h1>
		 	<div>点击开启甜蜜</div>
		</div>
		<div class="back loveimg">
		  <h1>初遇</h1>
		  <p>
		    2022年02月14号，天气晴，今天是情人节，本想宅在家里，奈何被室友各种哄骗，出去逛街去了，今天的街道上，充满了幸福的味道，甜蜜随处可见。我也遇到了生命中的贵人。
		  </p>
		  <p>这个是日记模板，摘抄的网上文章。自己可以按这种格式写，也可以改变自己喜欢的。这种模式是左边文字形式日记，右边是图片形式日记。</p>
		  <p>
		    如果你不爱一个人，请放手，好让别人有机会爱他。如果你爱的人放弃了你，请放开自己，好让自己有机会爱别人。生活中到处都存在着缘份，缘聚缘散好象都是命中注定的事情;有些缘份一开始就注定要失去，有些缘份永远都不会有好结果;可是我确偏偏渴望创造一种奇迹。爱一个人不一定是要拥有，但拥有一个人就要好好的去爱他。话说着容易，可一旦做时就很难。如果真诚是一种伤害，请选择谎言。如果谎言是一种伤害，请选择沉默。
		  </p>
		  <div class="pagetext">1</div>
		</div>    
		</section>
	</article>
	</div>
	
	<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
	<script src='js/myself.js'></script>
</body>
</html>

2.3 源码目录

在这里插入图片描述

2.4 更多为爱表白源码

    我能从一万个人的脚步声中听到你の脚步声，因为别人的脚步踏在地上，而你の脚步踏在我の心上。

HTML5新婚、年会、各种聚会的现场抽奖活动（附源码）

html书本翻页效果，浪漫表白日记本(附源码)

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

html实现浪漫的爱情日记（附源码）

html好看的生日祝福，生日表白(源码)

html实现好看的生日祝福(源码)

html实现爱情浪漫表白甜蜜时刻(附源码)

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

3.源码下载地址

【博主推荐】HTML5实现520表白、情人节表白模板源码 点击下载
在这里插入图片描述

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

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

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

     💘 为爱表白 为你那个TA，体验别致的浪漫惊喜

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

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

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1689602.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【每日一题】52.20个机器学习问题 2 （模型部署、实践流程和应用问题）

【每日一题】52.20个机器学习问题 2 （模型部署、实践流程和应用问题）

在上一篇《20个机器学习问答题》中&#xff0c;问题主要围绕机器学习的基础概念和理论知识。 这次&#xff0c;本篇内容针对机器学习的实践和应用继续提出了20个不同的问题。【点击跳转原文】 在实际应用中&#xff0c;机器学习模型的建立流程是怎样的&#xff1f; 机器学习模…
阅读更多...
C++语言基础光速入门笔记

C++语言基础光速入门笔记

目录 从C到CC和C语言的关系C编译器C面向对象程序设计标准库ANSI 标准C的使用场景标准化 安装 GNU 的 C/C 编译器g 应用说明g 常用命令选项 C 基本语法C 关键字三字符组 C 数据类型基本的内置类型typedef 声明枚举类型类型转换静态转换&#xff08;Static Cast&#xff09;动态转…
阅读更多...
Linux--09---RPM 、YUM

Linux--09---RPM 、YUM

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 RPM1 什么是RPM2 RPM包的名称格式3.RPM查询命令4.RPM卸载命令5.RPM安装命令 YUM1 什么是YUMYUM优势1.自动下载RPM包并且安装2.自动处理依赖性关系&#xff0c;并且一…
阅读更多...
【从C++到Java一周速成】章节14：网络编程

【从C++到Java一周速成】章节14：网络编程

章节14&#xff1a;网络编程 【1】网络编程的概念【2】IP地址与端口的概念【3】网络通信协议引入网络通信协议的分层 【3】Socket套接字【4】单向通信【5】双向通信 【1】网络编程的概念 把分布在不同地理区域的计算机与专门的外部设备用通信线路互联成一个规模大、功能强的网…
阅读更多...
记录Python低代码开发框架zdppy_amcrud的开发过程

记录Python低代码开发框架zdppy_amcrud的开发过程

实现新增接口 基础代码 import env import mcrud import api import snowflakeenv.load(".env") db mcrud.new_env()table "user" columns ["name", "age"]async def add_user(req):data await api.req.get_json(req)values [d…
阅读更多...
贪心算法--区间调度问题

贪心算法--区间调度问题

贪心算法 引言 贪心算法是一种简单而有效的算法设计技巧&#xff0c;在解决一些优化问题时具有广泛的应用。其基本思想是通过每一步的局部最优选择&#xff0c;最终达到全局最优解。贪心算法通常不会回溯之前的决策&#xff0c;而是根据当前状态作出最优决策&#xff0c;因此…
阅读更多...
数据库的约束 not null, unique, default, primary key, foreign key, check

数据库的约束 not null, unique, default, primary key, foreign key, check

约束可以理解成 数据库提供的一种针对数据的合法性进行验证的机制, 在创建表的时候使用 1. 约束类型 NOT NULL - 指示某列不能存储 NULL 值, 表里的这个内容是必填项UNIQUE - 保证某列的每行必须有唯一的值, 不能重复 每次插入/修改时, 都要先触发查询, 如果当前插入/修改的…
阅读更多...
Leetcode刷题2

Leetcode刷题2

文章目录 前言寻找两个正序数组的中位数1️⃣ 双指针快速排序2️⃣ 第k小数解法 Z 字形变换1️⃣ 个人解法2️⃣巧妙解法13️⃣巧妙解法2 字符串转换整数 (atoi)1️⃣ 常规方法2️⃣ 作弊方法&#x1f62b; 整数转罗马数字1️⃣ 常规方法&#xff1a;按照给定规则写出判断条件即…
阅读更多...
Python使用thread模块实现多线程

Python使用thread模块实现多线程

介绍&#xff1a; 线程&#xff08;Threads&#xff09;是操作系统提供的一种轻量级的执行单元&#xff0c;可以在一个进程内并发执行多个任务。每个线程都有自己的执行上下文&#xff0c;包括栈、寄存器和程序计数器。 在Python中&#xff0c;可以使用threading模块创建和管理…
阅读更多...
Mybatis源码剖析---第一讲

Mybatis源码剖析---第一讲

Mybatis源码剖析 基础环境搭建 JDK8 Maven3.6.3&#xff08;别的版本也可以…&#xff09; MySQL 8.0.28 --> MySQL 8 Mybatis 3.4.6 准备jar&#xff0c;准备数据库数据 把依赖导入pom.xml中 <properties><project.build.sourceEncoding>UTF-8</p…
阅读更多...
面试问题小结

面试问题小结

说说你的项目&#xff0c;从里面学到啥了&#xff08;随便说&#xff09; CAS 线程池 的各个方面 线程咋创建&#xff08;4种方式&#xff09; 说一下聚集索引和非聚集索引 50w男 50w女 &#xff0c;在B树中咋存储的&#xff08;类似下面的图&#xff0c;变通一下就行了&a…
阅读更多...
【题解】AB33 相差不超过k的最多数（排序 + 滑动窗口）

【题解】AB33 相差不超过k的最多数（排序 + 滑动窗口）

https://www.nowcoder.com/practice/562630ca90ac40ce89443c91060574c6?tpId308&tqId40490&ru/exam/oj 排序 滑动窗口 #include <iostream> #include <vector> #include <algorithm> using namespace std;int main() {int n, k;cin >> n &…
阅读更多...
k8s集群部署成功后某个节点突然出现notready状态解决办法

k8s集群部署成功后某个节点突然出现notready状态解决办法

通过&#xff1a; kubectl get nodes 查看master1节点为not ready 通过查看日志&#xff1a; journalctl -f -u kubelet.service 看到这里 查看状态&#xff1a; systemctl status kubelet.service 重启一样会报错 执行&#xff1a; swapoff -a 执行后&#xff0c;重启…
阅读更多...
行业首发 | MS08067-SecGPT（送邀请码）

行业首发 | MS08067-SecGPT（送邀请码）

一、简介 MS08067-SecGPT基于LLM大模型技术专门为网络安全领域设计的智能助手&#xff0c;集问答、分析、工具为一体的对话式安全专家&#xff0c;支持可以创建多会话问答。目的是辅助用户完成网络安全相关的工作&#xff0c;学员通过问答方式体验到SecGPT所具备的威胁情报分…
阅读更多...
查看目录或文件的磁盘使用情况

查看目录或文件的磁盘使用情况

在排查问题过程中&#xff0c;会遇到磁盘占满&#xff0c;需要排查具体哪个文件占用比较大&#xff0c;此时可以使用du 命令 du [选项] [文件或目录...] 常用的选项包括&#xff1a; -h 或 --human-readable&#xff1a;以人类可读的格式&#xff08;如 K、M、G&#xff09;…
阅读更多...
机器学习第四十周周报 WDN GGNN

机器学习第四十周周报 WDN GGNN

文章目录 week40 WDN GGNN摘要Abstract一、文献阅读1. 题目2. abstract3. 网络架构3.1 问题提出3.2 GNN3.3 CSI GGNN 4. 文献解读4.1 Introduction4.2 创新点4.3 实验过程4.3.1 数据获取4.3.2 参数设置4.3.3 实验结果 5. 结论二、GGNN1. 代码解释2. 网络结构小结参考文献参考文…
阅读更多...
汉明码(海明码)的计算的规则

汉明码(海明码)的计算的规则

一.汉明码的由来 1.汉明码&#xff08;Hamming Code&#xff09;&#xff0c;是在电信领域的一种线性调试码&#xff0c;以发明者理查德卫斯里汉明的名字命名。汉明码在传输的消息流中插入验证码&#xff0c;当计算机存储或移动数据时&#xff0c;可能会产生数据位错误&#x…
阅读更多...
mdm 推送证书制作教程

mdm 推送证书制作教程

第一步点击获取&#xff0c;点击以后会下载一个zip压缩包 解压以后&#xff1a;会得到四个文件&#xff0c;请务必保存好&#xff0c;待会需要使用 登录apple开发者官网 https://developer.apple.com/account/resources/certificates/list 点击添加证书 找到mdm csr 然后点击…
阅读更多...
Python | Leetcode Python题解之第100题相同的树

Python | Leetcode Python题解之第100题相同的树

题目&#xff1a; 题解&#xff1a; class Solution:def isSameTree(self, p: TreeNode, q: TreeNode) -> bool:if not p and not q:return Trueif not p or not q:return Falsequeue1 collections.deque([p])queue2 collections.deque([q])while queue1 and queue2:node…
阅读更多...
在Windows上创建RAM Disk

在Windows上创建RAM Disk

在Windows 10上创建一个与Linux中的tmpfs相似的内存文件系统&#xff08;一个文件系统&#xff0c;它使用主内存作为存储&#xff09;通常不是操作系统直接提供的功能。不过&#xff0c;有一些方法可以实现类似的效果。 使用软件创建RAM Disk 有一些第三方软件可以帮助在Wind…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023