下个月的 5.20 就是一年一度的「网络情人节」，你是否已经为心爱的人准备了一份专属的礼物呢？如果还没有，不妨让我们以程序员独有的浪漫，为心爱的人送上一份独一无二的礼物吧！
今天分享的代码是一个纯 HTML 文件，它可以制作一个具有「爱心跳动」效果的页面，并且还加入了文字漂浮的特效，让你的爱意和心意在页面上跃然呈现。
GIF 动图展示效果：
个性化定制
这段代码的魔力在于，它能够将你心中的爱意转化为屏幕上的跳动爱心，配合文字漂浮特效，让你的表白更加生动。
我的女神是「邓紫棋」，那么预览效果将会是满屏的「邓紫棋，我爱你」。而你只需简单修改下面代码段的文字片段为你心爱的人的名字和表达方式，即可在页面快速展现出对 ta 的爱意哦！
Heart.prototype.draw = function (i) {
ctx.globalAlpha = this.opacity;
ctx.font = `${180 * this.scale}px "微软雅黑"`;
// ctx.font="20px";
ctx.fill style = colors[i % 18];
ctx.fillText(
"邓紫棋，我喜欢你",
this.x - this.width * 0.5,
this.y - this.height * 0.5,
this.width,
this.height
);
};
由于附带文字的爱心跳动代码太长，这里仅展示部分代码：
<!DOCTYPE html>
<!--完整代码及页面展示效果请访问代码小抄 -->
<!--https://www.codecopy.cn/post/1bbvth -->
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>I love you</title>
< styletype="text/css"></ style>
</head>
<body>
<scripttype="text/javascript">
Heart.prototype.update = function (i) {
this.x += this.vel.x;
this.y += this.vel.y;
this.scale += (this.targetScale - this.scale) * 0.01;
if (this.x - this.width > ww || this.x + this.width < 0) {
this.scale = 0;
this.x = Math.random() * ww;
}
if (this.y - this.height > wh || this.y + this.height < 0) {
this.scale = 0;
this.y = Math.random() * wh;
}
this.width = 473.8;
this.height = 408.6;
};
Heart.prototype.draw = function (i) {
ctx.globalAlpha = this.opacity;
ctx.font = `${180 * this.scale}px "微软雅黑"`;
// ctx.font="20px";
ctx.fill style = colors[i % 18];
ctx.fillText(
"邓紫棋，我喜欢你",
this.x - this.width * 0.5,
this.y - this.height * 0.5,
this.width,
this.height
);
};
</script>
<!--完整代码及页面展示效果请访问代码小抄 -->
<!--https://www.codecopy.cn/post/1bbvth -->
</body>
</html>
完整代码可在下方小程序中查看，更适合在电脑上进行体验哦。若您正在使用电脑阅读本文，可复制下方链接到浏览器或点击文末的「阅读原文」即可快速体验附带文字的爱心跳动页面哦！
在线访问：https://www.codecopy.cn/post/1bbvth
具体 在线预览方式 和 快速分享代码 给心爱的 ta ，可参考下方图片中的红色框框。
并且不需要传统的下载和保存代码为文件，在代码小抄即可快速 copy 这份代码，将「邓紫棋」，更换为心爱的 ta 的名字，然后便可以 快速分享 这段代码的链接给你心爱的 ta，在线即可让其体验到不一样的爱，不一样的礼物哦！
另外在 5.20 之前，我们会不定期分享爱心表白代码哦，尽请关注 代码小抄官方推文 哦！
在代码小抄可以看到更多优质代码，也欢迎大家在此期间 积极分享爱心表白代码 哦，可能会获得我们官方的小礼品 🎁~
往期推荐
