七夕情人节表白网页制作【雪花爱心】

最新推荐文章于 2024-07-17 15:26:15 发布
最新推荐文章于 2024-07-17 15:26:15 发布
阅读量2k 收藏 35
点赞数 38
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68829137/article/details/128995533
版权

🏆今日学习目标：

🍀告白代码制作
✅创作者：林在闪闪发光
⏰预计时间：10分钟
🎉个人主页：林在闪闪发光的个人主页

 🍁林在闪闪发光的个人社区，欢迎你的加入: 林在闪闪发光的社区

 

  

目录

作品介绍

效果图

代码实现 (部分代码)

html (告白部分)

 js (雪花部分)

 源码获取

作品介绍

雪花爱心HTML特效是一款情人节主题特效，雪花飘落特效，在爱心里面记录我们在一起或者认识的时间，左侧可以写表白语句，或者甜言蜜语。

效果图 

在线演示地址

 

代码实现 (部分代码)

html (告白部分)


<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>表白网页设计模板 -</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style type="text/css">
		@font-face {
			font-family: digit;
			src: url('digital-7_mono.ttf') format("truetype");
		}
	</style>
<meta name="keywords" content="" />
<meta name="description" content="" />	<link href="css/default.css" type="text/css" rel="stylesheet">
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/garden.js"></script>
    <script type="text/javascript" src="js/functions.js"></script>
	
	<script type="text/javascript" src="js/jq.snow.js"></script>
</head> 

<body>
<!--下面是调用方法和参数说明-->
	<script>
	$(function(){
		$.fn.snow({ 
			minSize: 5,		//雪花的最小尺寸
			maxSize: 50, 	//雪花的最大尺寸
			newOn: 150		//雪花出现的频率 这个数值越小雪花越多
		});
	});
	</script>
	<div id="mainDiv">
		<div id="content">
			<div id="code">
				<span class="comments">/**</span><br />
        <span class="space"/><span class="comments">* Abby：今天是2014年2月14日。</span><br />
        <span class="space"/><span class="comments">* 我写这个网站来庆祝这个特殊的日子。 </span><br />
        <span class="space"/><span class="comments">* 虽然，我不是一个很擅长表达言语的人。 </span><br />
        <span class="space"/><span class="comments">* 但我希望我们能记住我们在一起的每一刻。</span><br />
				<span class="space"/><span class="comments">*/</span><br />
				Girl u = <span class="keyword">new</span> Girl(<span class="string">"Abby"</span>);<br/>
				Boy i = <span class="keyword">new</span> Boy(<span class="string">"Mark"</span>);<br />
				<span class="comments">// 今天是二月十四日。 </span><br />
				<span class="comments">// 祝老婆情人节快乐。</span><br />
				<span class="comments">// 我把你的美丽记录在日记里，让文字把你的青春铭记。</span><br />
        <span class="comments">// 我把你的笑容粘贴在日记里，让图片把你的活泼记忆。</span><br />
				<span class="comments">// 我把我的照片夹进日记里，让爱情把你的幸福牢系。</span><br />
				<span class="comments">// 对我来说是个重要的时刻，我发现我已经深深爱上了你！</span><br />
        <span class="comments">// 当我凝视你的眼，当我听到你的声音。 </span><br />
				<span class="comments">// 当我闻到你秀发上淡淡的清香。 </span><br />
        <span class="comments">//  </span><br />
				我爱你;<br />
				<span class="comments">//当我感受到我剧烈的心跳，我明白了：</span><br />
				我想你;<br />
				<span class="comments">// 你在我心中最美。 </span><br />
				我想照顾你 <br />
				<span class="comments">// 你是我今生的唯一！</span><br />
				<span class="comments">// 所以我继续等待，我有信心，你会。</span><br />
				<span class="keyword">我会</span> 永远  <span class="keyword">爱你</span>;<br />
				<span class="keyword">一直</span> 爱你 <br />
				<span class="placeholder"/>我有一颗永远不变的心<br />
				<span class="placeholder"/><span class="comments">// 我认为这是一个重要的决定。</span><br />
				<span class="placeholder"/><span class="comments">// 你可以在任何时候决定。</span><br />
				<span class="placeholder"/>爱你 = 想你<br /><br />
				我非常高兴能认识你<br />
			</div>
			<div id="loveHeart">
				<canvas id="garden"></canvas>
				<div id="words">
					<div id="messages">
						        Abby,我已经相爱了：
						<div id="elapseClock"></div>
					</div>
					<div id="loveu">
						<div class="signature">--Mark</div>
					</div>
				</div>


				     </div>
				</div>
			</div>
</div>
	<div class="bg1">	
		<div class="main">
			<footer style="line-height:20px">
                <div id="copyright">
                     <a href='' target="_blank"></a> 
                    <a href="" target="_blank"></a>
                    <a href="" target="_blank"></a>
                </object>
                </div>
		</div>
	</div>
</div>


	<embed src="http://sisiyan.sinaapp.com/Love.mp3" autostart="true" loop="true" hidden="true"></embed>
</body>
</html>

 js (雪花部分)

	<script type="text/javascript">
		var offsetX = $("#loveHeart").width() / 2;
		var offsetY = $("#loveHeart").height() / 2 - 55;
		var together = new Date();
		together.setFullYear(2010, 06, -32);
		together.setHours(00);
		together.setMinutes(0);
		together.setSeconds(0);
		together.setMilliseconds(0);
		
		if (!document.createElement('canvas').getContext) {
			var msg = document.createElement("div");
			msg.id = "errorMsg";
			msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+"; 
			document.body.appendChild(msg);
			$("#code").css("display", "none")
			$("#copyright").css("position", "absolute");
			$("#copyright").css("bottom", "10px");
		    document.execCommand("stop");
		} else {
			setTimeout(function () {
				startHeartAnimation();
			}, 5000);

			timeElapse(together);
			setInterval(function () {
				timeElapse(together);
			}, 500);

			adjustCodePosition();
			$("#code").typewriter();
		}
	</script>

 源码获取

❀ ~ 关注我私信获取，点赞博文~ 每天带你涨知识!

 

林在闪闪发光
关注
  • 38
    点赞
  • 踩
  • 35
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 62
    评论
HTML5七夕情人节表白网页制作【雪花爱心】HTML+CSS+JavaScript 爱心代码 爱心制作 表白代码 告白网页制作
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等元素的插入。 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog
c#爱情表白小程序
01-02
Move事件和Enter事件 鼠标进入的时候发生的事件。
100款程序员专属情人节生日表白网站【建议收藏】HTML+CSS+JavaScript
网页设计与制作
03-12 1069
🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻 💂 作者主页: 【进入主页—🚀获取更多源码】 🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！ 📂文章目录二、📚网站介绍三、🔗网站效果🧩 2.图片演示四、💒 网站代码🧱HTML结构代码🏠CSS样式代码五、🎁更多
HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-21 1万+
❉ HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了，来制作属于我们程序员的浪漫吧！ ❉ 文章目录 ❉ HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)❉ 效果演示❉ 代码文件目录一、文字修改(代码实现)
HTML5七夕情人节表白网页制作【html5+canvas全屏的520爱心表白网页代码】HTML+CSS+JavaScript
01-02 549
这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 文章目录一、网页介绍一、网页效果二、
浪漫的七夕表白简单代码（简单的小代码）
离歌的博客
08-22 3669
是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？无论那种形式，快来秀我们一脸吧！以程序员的方式撒狗粮，专业浪漫，值得拥有！ 浪漫的七夕表白简单代码（简单的小代码）
html表白代码
酷酷的馫博客
11-26 2万+
html表白代码
html5七夕情人节送花卡通短片特效源代码
03-18
该软件是一个由html5进行开发的动画特效表白软件。 情人节必备 七夕情人节男士买花送花动画场景。 一款类似动画短片的七夕情人节男士买花送花动画场景。
HTML5七夕情人节表白结婚邀请函网页制作(HTML+CSS+JavaScript)
HTML网页设计 专注大学生网页设计
09-25 6559
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑方面等任意html编辑软件进行运行及修改编辑等操作）。其中：（1）📜html文件包含：其中index.html是首页、其他html为二级页面；（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等（3）📄 js文件包含：页面炫酷效果实现。
HTML5七夕情人节表白网页制作【圣诞雪花飘落】HTML+CSS+JavaScript
08-10
HTML静态网页设计作业，采用DIV+CSS...文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog
HTML5七夕情人节表白网页制作【新年倒计时-红色雪花】HTML+CSS+JavaScripd
08-10
HTML静态网页设计作业，采用DIV+CSS...文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog
HTML5七夕情人节表白网页制作【3D雪花展开相册】HTML+CSS+JavaScript 程序员表白网页 简单的3D相册制作
08-10
HTML静态网页设计作业，采用DIV+CSS...文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog
HTML5七夕情人节表白网页制作【新年倒计时白色雪花飘落】HTML+CSS+JavaScript CSS特效
08-10
HTML静态网页设计作业，采用DIV+CSS...文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog
别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(1)
逆境清醒的博客
02-13 4757
“2023唯美浪漫情人节表白专辑”，希望能在这个情人节帮你们更好的向你所喜欢的人表达内心的感受。
HTML5七夕情人节表白网页制作【一起跨年表白代码】HTML+CSS+JavaScript
HTML网页设计
07-24 2599
1 网页简介：基于 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。代码如下（示例）：以下仅展示部分代码供参考~ 2.CSS代码 三、精彩专栏 看到这里了就 【点赞，关注，收藏】 三连 支持下吧，你的支持是我创作的动力。......
html爱心特效代码
热门推荐
梦游星海的博客
10-26 44万+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywor...
HTML表白程序，一定要收藏好
bloddy_mary的博客
03-05 1142
这是我收集的一些表白神器，拿着它，去和你的男/女神表白吧！！！！！！！！！
HTML 网页表白，520
qgy92320的专栏
05-18 3875
/* Left & Right alignment */ .left { float:left;} .right { float:right;} .wrapper {width:100%; overflow:hidden;} .relative{ position:relative;} /* Global properties ======================================================== */ body{ background: url(..
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
最新发布
OpenTiny的博客
07-17 1213
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
圣诞节代码html飘雪花
12-08
以下是基于HTML5 Canvas实现的圣诞节动态下雪页面雪花飘落代码，你可以将其嵌入到你的网页中，制作出圣诞节主题相关的各种网页特效。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>圣诞节动态下雪页面</title> <style> body { background-color: #1E90FF; } canvas { position: absolute; top: 0; left: 0; } </style> </head> <body> <canvas id="canvas"></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // 设置canvas宽高 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 雪花数量 var snowCount = 100; // 雪花数组 var snows = []; // 雪花类 function Snow() { // 雪花半径 this.r = Math.random() * 4 + 1; // 雪花位置 this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; // 雪花速度 this.vx = Math.random() * 2 - 1; this.vy = Math.random() * 2 + 1; // 雪花颜色 this.color = "#fff"; } // 生成雪花 function createSnow() { for (var i = 0; i < snowCount; i++) { snows.push(new Snow()); } } // 绘制雪花 function drawSnow() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < snowCount; i++) { var snow = snows[i]; ctx.beginPath(); ctx.arc(snow.x, snow.y, snow.r, 0, Math.PI * 2); ctx.fillStyle = snow.color; ctx.fill(); } } // 更新雪花位置 function updateSnow() { for (var i = 0; i < snowCount; i++) { var snow = snows[i]; snow.x += snow.vx; snow.y += snow.vy; if (snow.x > canvas.width + snow.r || snow.x < -snow.r || snow.y > canvas.height + snow.r) { snows[i] = new Snow(); } } } // 动画循环 function loop() { drawSnow(); updateSnow(); requestAnimationFrame(loop); } // 初始化 createSnow(); loop(); </script> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 62
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

林在闪闪发光

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值