【爱心代码大全】——情人节表白代码送给她属于我们程序员的浪漫

已于 2022-02-14 13:37:43 修改
阅读量2.2w 收藏 147
点赞数 39
文章标签： xhtml javascript html 爱心代码 程序员的浪漫
于 2022-02-11 07:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42306958/article/details/122869886
版权

👴大多数人以为的程序员——发量少，身穿格子褂，坐在电脑前就是码字。一点也不懂浪漫！

cb49028e643c4afb81c7f404f0b9a902.png

谁说我们不懂浪漫的？ 不！ 你错了 程序员一旦浪漫起来，真没其他人啥事了！！！

浪漫表白一

e2f9febda15d40f18098f2a6337e1cd0.gif

 

 代码部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>爱心表白</title>

<style type="text/css">
@font-face {
	font-family: digit;
	src: url('digital-7_mono.ttf') format("truetype");
}
</style>

<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>

</head>

<body>

<div id="mainDiv">
	<div id="content">
		<div id="code">
			<span class="comments">/**</span><br />
			<span class="space"/><span class="comments">*2022—02-10,</span><br />
			<span class="space"/><span class="comments">*2022—02-10.</span><br />
			<span class="space"/><span class="comments">*/</span><br />
			Boy name = <span class="keyword">Mr</span> LI<br />
			Girl name = <span class="keyword">Mrs</span> ZHANG<br />
			<span class="comments">// Fall in love river. </span><br />
			The boy love the girl;<br />
			<span class="comments">// They love each other.</span><br />
			The girl loved the boy;<br />
			<span class="comments">// AS time goes on.</span><br />
			The boy can not be separated the girl;<br />
			<span class="comments">// At the same time.</span><br />
			The girl can not be separated the boy;<br />
			<span class="comments">// Both wind and snow all over the sky.</span><br />
			<span class="comments">// Whether on foot or 5 kilometers.</span><br />
			<span class="keyword">The boy</span> very <span class="keyword">happy</span>;<br />
			<span class="keyword">The girl</span> is also very <span class="keyword">happy</span>;<br />
			<span class="placeholder"/><span class="comments">// Whether it is right now</span><br />
			<span class="placeholder"/><span class="comments">// Still in the distant future.</span><br />
			<span class="placeholder"/>The boy has but one dream;<br />
			<span class="comments">// The boy wants the girl could well have been happy.</span><br />
			<br>
			<br>
			I want to say:<br />
			Baby, I love you forever;<br />
		</div>
		<div id="loveHeart">
			<canvas id="garden"></canvas>
			<div id="words">
				<div id="messages">
					执子之手
					<div id="elapseClock"></div>
				</div>
				<div id="loveu">
					与子偕老<br/>
					<div class="signature">- 爱你的人</div>
				</div>
			</div>
		</div>
	</div>
	<div id="copyright">
		<a href="#">....</a><br />
		<a href="#">....</a><br />
		
	</div>
</div>

<script type="text/javascript">
var offsetX = $("#loveHeart").width() / 2;
var offsetY = $("#loveHeart").height() / 2 - 55;
var together = new Date();
together.setFullYear(2013, 2, 28);
together.setHours(20);
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>

</body>
</html>

浪漫表白二

435350db7faf4e3da2a8a6e663f95de0.gif

 代码部分

<!DOCTYPE html>

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我爱你</title>
<link type="text/css" rel="stylesheet" href="renxi/default.css">
<script type="text/javascript" src="renxi/jquery.min.js"></script>
<script type="text/javascript" src="renxi/jscex.min.js"></script>
<script type="text/javascript" src="renxi/jscex-parser.js"></script>
<script type="text/javascript" src="renxi/jscex-jit.js"></script>
<script type="text/javascript" src="renxi/jscex-builderbase.min.js"></script>
<script type="text/javascript" src="renxi/jscex-async.min.js"></script>
<script type="text/javascript" src="renxi/jscex-async-powerpack.min.js"></script>
<script type="text/javascript" src="renxi/functions.js" charset="utf-8"></script>
<script type="text/javascript" src="renxi/love.js" charset="utf-8"></script>
<style type="text/css">
<!--
.STYLE1 {
	color: #666666
}
-->
</style>
</head>
<body>
<audio autoplay="autopaly">
  <source src="renxi.mp3" type="audio/mp3" />
</audio>
<div id="main">
  <div id="error">本页面采用HTML5编辑，目前您的浏览器无法显示，请换成谷歌(<a href="http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN&brand=CHMI">Chrome</a>)或者火狐(<a href="http://firefox.com.cn/download/">Firefox</a>)浏览器，或者其他游览器的最新版本。</div>
  <div id="wrap">
    <div id="text">
      <div id="code"> <font color="#FF0000"> <span class="say">亲爱的宝宝，我爱你</span><br>
        <span class="say"> </span><br>
        <span class="say"> 我知道我不会甜言蜜语，</span><br>
        <span class="say"> </span><br>
        <span class="say"> 但是我会用行动证明一切</span><br>
        <span class="say"> </span><br>
    <div id="clock-box"> <span class="STYLE1"></span><font color="#FF4500">亲爱的宝宝，我爱你</font> <span class="STYLE1">已经是……</span>
      <div id="clock"></div>
    </div>
    <canvas id="canvas" width="1100" height="680"></canvas>
  </div>
</div>
<script>
    </script>
<script>
    (function () {
        var canvas = $('#canvas');

        if (!canvas[0].getContext) {
            $("#error").show();
            return false;
        }
        var textAnimate = eval(Jscex.compile("async", function () {
            var together = new Date();
            together.setFullYear(2010, 3,1); 			//时间年月日
            together.setHours(16);						//小时	
            together.setMinutes(53);					//分钟
            together.setSeconds(0);					//秒前一位
            together.setMilliseconds(2);				//秒第二位

            $("#code").show().typewriter();
            $("#clock-box").fadeIn(500);
            while (true) {
                timeElapse(together);
                $await(Jscex.Async.sleep(1000));
            }
        }));
        var runAsync = eval(Jscex.compile("async", function () {
            $await(seedAnimate());
            $await(growAnimate());
            $await(flowAnimate());
            $await(moveAnimate());

            textAnimate().start();

            $await(jumpAnimate());
        }));

        runAsync().start();
    })();
    </script>
</body>
</html>

怎么样，浪漫吧，还不抓紧收藏起来！！！【源码评论区留言或者私信博主哦~，都是各位大佬贡献的源码啦~】

没看够？别急，再给大家看看程序员大佬的浪漫~

浪漫表白三 原文连接https://www.jq22.com/jquery-info18876体验一下

f91dc590753249eaa22842eba9a623e8.gif

浪漫表白四

原文连接https://www.jq22.com/jquery-info14520体验一下

d5887acd4ce24cfaa7a636c6d0db368c.gif

浪漫表白五

原文连接https://www.jq22.com/jquery-info14031体验一下

42c94f7ce8ab4cb091633c52edee6ded.gif

怎么样，浪漫吧，还不抓紧收藏起来！！！【源码评论区留言或者私信博主哦~，都是各位大佬贡献的源码啦~】

b780b895f7ec4abba39d4750c3a2e15e.gif

 

超梦梦梦梦
关注
  • 39
    点赞
  • 踩
  • 147
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 49
    评论
情人节html代码大全.pdf
02-15
情人节html代码大全情人节html代码大全.pdf
HTML5七夕情人节表白结婚邀请函网页制作(HTML+CSS+JavaScript)
HTML网页设计 专注大学生网页设计
09-25 6340
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑方面等任意html编辑软件进行运行及修改编辑等操作）。其中：（1）📜html文件包含：其中index.html是首页、其他html为二级页面；（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等（3）📄 js文件包含：页面炫酷效果实现。
Python教程：程序员6款，简易版的爱心表白代码合集
最新发布
lyy2017175913的博客
04-17 1364
请输入表白语句，然后回车，(例如"I Love You"):I Love You请输入要表白的人(例如"刘亦菲"):刘亦菲。
Unity-微信小程序上墙表白墙源码
03-16
Unity开发PC端，手机微信小程序发送数据上墙，微信名、微信头像、爱心、烟花，资源包括了unity端的工程文件以及小程序端的工程文件。
情人节html代码大全.md
02-14
情人节html代码大全
520程序员前端表白代码，使用 HTML、CSS 和 JavaScript 编写一段浪漫的代码，用于表达爱意
05-16
内容概要: 这段浪漫代码是通过HTML、CSS和JavaScript编写的，通过结合这三种前端技术，我们创建了一个令人心动的情人节表白页面。包含了逐行打印文字、变色效果和玫瑰花的飘落等特效。它能够营造出浪漫的氛围，并用创意的方式表达爱意。 适用人群: 这段代码适用于希望以创意和浪漫的方式表达爱意的人群。无论是情侣还是恋人，他们可以通过这段代码给对方留下深刻的印象和甜蜜的回忆。 使用场景和目标: 这段代码适用于多种场景，包括但不限于情人节、纪念日、生日等特殊时刻。它的目标是通过特效的展示和个性化的定制，表达浓浓的爱意和感情，让接收者感受到深深的关爱和温暖。 其他说明: - 这段代码可以在任何现代的Web浏览器中运行，无需额外的插件或软件。 - 用户可以根据自己的需求对代码进行定制，例如修改文字内容、颜色、字体大小等，以实现个性化的效果。随机变换文字颜色，增加视觉吸引力、背景效果营造浪漫的夜空氛围、按钮点击播放烟花动画和背景音乐。 - 希望有机会学习和欣赏您精心制作的代码，感受到代码的魅力和浪漫的力量。 - 请注意，在某些浏览器中可能需要用户与页面进行交互才能播放烟花声音。
爱心代码+烟花代码，下载可直接浏览器绽放！
01-20
爱心代码，烟花代码，手残党也会！！ 代码是HTML语言下载可直接浏览器绽放！
HTML超级浪漫的独一无二的爱心表白代码，亲测可用！
chenzhi0122的博客
06-16 2754
话不多说代码给上，感觉不错还请一键三联！
用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）
热门推荐
逆境清醒的博客
08-01 3万+
有缘遇到真心对你好的人不容易，像父母、朋友、真爱你的人，如果遇到了，请好好珍惜，因为有时，有些你想象不到的事情会突然发生，如果遇到了，请别慌乱害怕，那些真心对你的人会陪在你身边和你一起度过最难熬的日子，所以请抓住每一分每一秒，好好对待身边人，凡事别计较太多，把心放宽。在你遇到。。。时，请记住，你并不是唯一一个，这世界上有很多人正在经历着和你一样的事情，虽然他们没有或者无法说出来。.....................
爱心代码，烟花代码，附带教程，手残党也能学会！！
weixin_44006731的博客
01-20 1万+
爱心代码，烟花代码，附带教程，手残党也能学会！！
谁说程序员不懂浪漫，表白代码来啦~
技术专家
08-03 4341
七夕推荐： 写了一首 Java 表白诗，女朋友不愁了！
情人节浪漫动态表白代码
03-24
C++语言情人节表白模板，99%几率成功，浪漫动态表白代码
情人节html代码大全.zip
02-15
情人节html代码大全情人节html代码大全.zip
HTML浪漫动态表白代码
02-09
HTML浪漫动态表白代码+音乐(附源码)，内含4款源码
爱心代码大全-情人节将至，给她一个属于我们程序员的浪漫吧~
02-12
1.通过JS和CSS生成动态爱心代码，情人节将至，给你的那个她露一手？展示展示属于我们程序员的浪漫嘛？ 2.资源解压后就有直接打开html即可生成动态效果 3.下载后可以自行修改html代码改变文字内容
Python实现发射爱心代码，Python情人节520表白代码
02-11
Python实现发射爱心代码，Python情人节520表白代码
12款情人节网页表白代码总一款适合你，程序员情人节表白代码，html情人节代码
02-13
12款情人节网页表白代码总一款适合你，程序员情人节表白代码，html情人节代码
程序员浪漫-浪漫爱心代码（附赠源码html）
12-20
程序员—专属浪漫爱心代码 胆大心细脸皮厚是表白的不二法门。第一次表白表示被拒绝了后，通常后来慢慢相处再表白就成功了。 要耐心，要脸皮厚，要细心。不要怕你的主动会带来她的反感，你不主动，她也不主动，也就...
程序员表白代码之情人节快乐！
04-28
程序员表白代码之情人节快乐，绝对感天动地，希望程序员们找到好的归属！
浪漫代码大全html
09-08
很高兴你对浪漫代码感兴趣！不过很抱歉，我并不能提供完整的浪漫代码大全。不过，我可以给你一些简单的 HTML 代码示例，用于创建一些浪漫的效果。例如： 1. 创建一个带有心形背景的页面： ```html <!DOCTYPE html> <html> <head> <style> body { background-image: url('heart.png'); background-repeat: no-repeat; background-size: cover; } </style> </head> <body> </body> </html> ``` 2. 创建一个爱心动画效果： ```html <!DOCTYPE html> <html> <head> <style> @keyframes heartbeat { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .heart { width: 100px; height: 100px; background-color: red; border-radius: 50%; position: relative; animation: heartbeat 1s infinite; } </style> </head> <body> <div class="heart"></div> </body> </html> ``` 这些是一些简单的示例，希望能为你提供一些灵感！如果你有其他具体的需求或者更多问题，欢迎继续提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

超梦梦梦梦

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

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

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

打赏作者

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

抵扣说明：

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

余额充值