这个爱心代码，极客范十足~

程序员鱼皮 · 公众号 · · 2024-04-27 11:00

正文

马上就到了一年一度的 5.20（网络情人节）啦，不妨试试利用代码去给心爱的人送上一份特殊的礼物。

上周我们分享了“爱心跳动”效果的代码礼物，有想要欣赏的小伙伴可以点击下方文字标题可以直接跳转哦！

专属程序员的浪漫：用代码说 “我爱你”~

今天我们继续分享一款超级炫酷且极具极客范的爱心代码， GIF 效果图如下 ：

由于炫酷且极具极客范的爱心代码片段较长，这里仅展示部分代码：

html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<head>
    <title>I love youtitle>
head>
<body>
    <div id="child">
        <h4>💗我永远为你着迷h4>
    div>
    
    <canvas id="pinkboard">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 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>


HTML>

完整代码可在下方小程序中查看，更适合在电脑上进行体验哦。若您正在使用电脑阅读本文，可复制下方链接到浏览器或点击 文末的“阅读原文” 即可 快速体验 炫酷且极具黑客范的爱心代码页面效果哦！

在线访问：https://www.codecopy.cn/post/yf7ri5

具体在线预览方式，可参考下方图片中的红色框框。

并且在 代码小抄 中，你可以直接快速 copy 这份代码，无需传统的下载和保存为文件。然后，你可以即刻将 代码链接 分享给你心爱的人，让 TA 在线体验 到独特的爱意和礼物！

另外在 5.20 之前，我们会不定期分享爱心表白代码哦，尽请关注 代码小抄官方推文 哦！在代码小抄可以看到更多优质代码，也欢迎大家积极分享爱心表白代码哦，可能会获得我们官方的小礼品 🎁~

往期推荐

这个爱心代码，极客范十足~

正文

请到「今天看啥」查看全文