首页 > 数据库 > 数据库开发技术 > 这个爱心代码,极客范十足~
马上就到了一年一度的 5.20(网络情人节)啦,不妨试试利用代码去给心爱的人送上一份特殊的礼物。
上周我们分享了“爱心跳动”效果的代码礼物,有想要欣赏的小伙伴可以点击下方文字标题可以直接跳转哦!
今天我们继续分享一款超级炫酷且极具极客范的爱心代码,GIF 效果图如下:

由于炫酷且极具极客范的爱心代码片段较长,这里仅展示部分代码:
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--完整代码及页面展示效果请访问代码小抄 -->
<!-- https://www.codecopy.cn/post/yf7ri5 -->
<head>
<title>I love you</title>
</head>
<body>
<div id="child">
<h4>💗我永远为你着迷</h4>
</div>
<!--这里写名字❤!!!-->
<canvas id="pinkboard"></canvas>
<!-- <canvas id= "canvas"></canvas> -->
<script>
/*
* Settings
*/
var settings = {
particles: {
length: 500, // maximum amount of particles
duration: 2, // particle duration in sec
velocity: 100, // particle velocity in pixels/sec
effect: -0.75, // play with this for a nice effect
size: 30, // particle size in pixels
},
};
/*
* RequestAnimationFrame polyfill by Erik Möller
*/
(function () { var b = 0; var c = ["ms", "moz", "webkit", "o"]; for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) { window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"]; window.cancelAnimationFrame = window[c[a] + "CancelAnimationFrame"] || window[c[a] + "CancelRequestAnimationFrame"] } if (!window.requestAnimationFrame) { window.requestAnimationFrame = function (h, e) { var d = new Date().getTime(); var f = Math.max(0, 16 - (d - b)); var g = window.setTimeout(function () { h(d + f) }, f); b = d + f; return g } } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function (d) { clearTimeout(d) } } }());
/*
* Point class
*/
var Point = (function () {
function Point(x, y) {
this.x = (typeof x !== 'undefined') ? x : 0;
this.y = (typeof y !== 'undefined') ? y : 0;
}
Point.prototype.clone = function () {
return new Point(this.x, this.y);
};
Point.prototype.length = function (length) {
if (typeof length == 'undefined')
return Math.sqrt(this.x * this.x + this.y * this.y);
this.normalize();
this.x *= length;
this.y *= length;
return this;
};
Point.prototype.normalize = function () {
var length = this.length();
this.x /= length;
this.y /= length;
return this;
};
return Point;
})();
</script>
</body>
<!--完整代码及页面展示效果请访问代码小抄 -->
<!-- https://www.codecopy.cn/post/yf7ri5 -->
</HTML>
完整代码可在下方小程序中查看,更适合在电脑上进行体验哦。若您正在使用电脑阅读本文,可复制下方链接到浏览器或点击文末的“阅读原文”即可快速体验炫酷且极具黑客范的爱心代码页面效果哦!
在线访问:https://www.codecopy.cn/post/yf7ri5
具体在线预览方式,可参考下方图片中的红色框框。
并且在代码小抄中,你可以直接快速 copy 这份代码,无需传统的下载和保存为文件。然后,你可以即刻将代码链接分享给你心爱的人,让 TA 在线体验到独特的爱意和礼物!
另外在 5.20 之前,我们会不定期分享爱心表白代码哦,尽请关注代码小抄官方推文哦!在代码小抄可以看到更多优质代码,也欢迎大家积极分享爱心表白代码哦,可能会获得我们官方的小礼品 🎁~
往期推荐
代码小抄插件上线!一键分享代码
专属程序员的浪漫:用代码说 “我爱你”~
今日代码大赏 | Spring Boot 健康检查接口
今日代码大赏 | Java 获取客户端 IP 地址
原文作者:程序员鱼皮;如有侵权,请联系管理员删除。