• 李珣同款爱心特效代码，加DIY教程，快拿去送给你喜欢的那个ta吧。

    👨‍🎓 作者：bug菌

    🎉简介：在CSDN、掘金等社区优质创作者，全网合计6w粉+，对一切技术都感兴趣，重心偏java方向，目前运营公众号[猿圈奇妙屋]，欢迎小伙伴们的加入，一起秃头。

    🚫特别声明：原创不易，转载请附上原文出处链接和本文声明，谢谢配合。

    🙏版权声明：文章里可能部分文字或者图片来源于互联网或者百度百科，如有侵权请联系bug菌处理。

     一、前言🔥

            听说全网都在挑战这个，bug菌火急火燎，马不停蹄送来源码教学教程！快拿去送给你喜欢的那个ta吧。废话不多说，咱们先来看看代码运行效果，是不是你们想要的爱心动画？

            如上便是李珣同款爱心，代码都帮大家准备好了，接着往下看！

            若你中意的那个ta想拥有与全网不一样的爱心，比如如下，DIY文字版特效爱心，代码也帮你们准备好了，你只需要修改文字部分内容即可！不懂代码的也没关系，我会手把手教学，让你就算看不懂代码也能学会自定义文字！真的超级简单。代码教程我都放在下方了。

    二、源代码🔥

            如下附上该特效核心代码，请查阅，若有完全免动手不想费力的小伙伴，可以去我的公号【猿圈奇妙屋】拿，直接回复【爱心】，即可拿到可直接运行的爱心动画文件(文件直接现成的哦！)，心动不如行动。

             回复后你点击链接再输入提取码，即可拿到一个[heart.zip]的压缩包，你们只需要下载到本地并解压即可，具体解压后得到的文件如下:

             文件可直接通过浏览器打开即可实现播放。若要修改自定义文字，你可以通过选择打开方式【记事本】选中[DIY-heart.html]文件，然后找到第36行，具体请看如下截图：

            将如下文字，修改成你想要的文字即可！比如如上我设置的就是"致我最爱的崽崽！"展示效果也就如下所示，字跟爱心跳动同频哦。

            ok，教学我都基本说完了，如下贴出火爆全网同款的爱心源码，你们只需要将如下全代码复制粘贴保存到一个[xxx.txt]记事本中，然后将[.txt]格式改成[.html]后缀，最后通过浏览器打开即可播放。

    源码如下：

    1. <html>
    2. <head>
    3.     <meta charset="utf-8">
    4.     <title>Love-Hearttitle>
    5.     <link rel="shortcut icon" href="http://zhouql.vip/images/心.png" type="image/x-icon">
    6.     <style>
    7.         html,
    8.         body {
    9.             height: 100%;
    10.             padding: 0;
    11.             margin: 0;
    12.             background: #000;
    13.         }
    14.         canvas {
    15.             position: absolute;
    16.             width: 100%;
    17.             height: 100%;
    18.         }
    19.     style>
    20. head>
    21. <body>
    22.     <canvas id="pinkboard">canvas>
    23.     <script>
    24.         var settings = {
    25.             particles: {
    26.                 length: 500, 
    27.                 duration: 2, 
    28.                 velocity: 100, 
    29.                 effect: -0.75, 
    30.                 size: 32, 
    31.             },
    32.         };
    33.         (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) } } }());
    34.  
    35.         var Point = (function () {
    36.             function Point(x, y) {
    37.                 this.x = (typeof x !== 'undefined') ? x : 0;
    38.                 this.y = (typeof y !== 'undefined') ? y : 0;
    39.             }
    40.             Point.prototype.clone = function () {
    41.                 return new Point(this.x, this.y);
    42.             };
    43.             Point.prototype.length = function (length) {
    44.                 if (typeof length == 'undefined')
    45.                     return Math.sqrt(this.x * this.x + this.y * this.y);
    46.                 this.normalize();
    47.                 this.x *= length;
    48.                 this.y *= length;
    49.                 return this;
    50.             };
    51.             Point.prototype.normalize = function () {
    52.                 var length = this.length();
    53.                 this.x /= length;
    54.                 this.y /= length;
    55.                 return this;
    56.             };
    57.             return Point;
    58.         })();
    59.         var Particle = (function () {
    60.             function Particle() {
    61.                 this.position = new Point();
    62.                 this.velocity = new Point();
    63.                 this.acceleration = new Point();
    64.                 this.age = 0;
    65.             }
    66.             Particle.prototype.initialize = function (x, y, dx, dy) {
    67.                 this.position.x = x;
    68.                 this.position.y = y;
    69.                 this.velocity.x = dx;
    70.                 this.velocity.y = dy;
    71.                 this.acceleration.x = dx * settings.particles.effect;
    72.                 this.acceleration.y = dy * settings.particles.effect;
    73.                 this.age = 0;
    74.             };
    75.             Particle.prototype.update = function (deltaTime) {
    76.                 this.position.x += this.velocity.x * deltaTime;
    77.                 this.position.y += this.velocity.y * deltaTime;
    78.                 this.velocity.x += this.acceleration.x * deltaTime;
    79.                 this.velocity.y += this.acceleration.y * deltaTime;
    80.                 this.age += deltaTime;
    81.             };
    82.             Particle.prototype.draw = function (context, image) {
    83.                 function ease(t) {
    84.                     return (--t) * t * t + 1;
    85.                 }
    86.                 var size = image.width * ease(this.age / settings.particles.duration);
    87.                 context.globalAlpha = 1 - this.age / settings.particles.duration;
    88.                 context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);
    89.             };
    90.             return Particle;
    91.         })();
    92.         var ParticlePool = (function () {
    93.             var particles,
    94.                 firstActive = 0,
    95.                 firstFree = 0,
    96.                 duration = settings.particles.duration;
    97.             function ParticlePool(length) {
    98.                 // create and populate particle pool
    99.                 particles = new Array(length);
    100.                 for (var i = 0; i < particles.length; i++)
    101.                     particles[i] = new Particle();
    102.             }
    103.             ParticlePool.prototype.add = function (x, y, dx, dy) {
    104.                 particles[firstFree].initialize(x, y, dx, dy);
    105.                 // handle circular queue
    106.                 firstFree++;
    107.                 if (firstFree == particles.length) firstFree = 0;
    108.                 if (firstActive == firstFree) firstActive++;
    109.                 if (firstActive == particles.length) firstActive = 0;
    110.             };
    111.             ParticlePool.prototype.update = function (deltaTime) {
    112.                 var i;
    113.                 // update active particles
    114.                 if (firstActive < firstFree) {
    115.                     for (i = firstActive; i < firstFree; i++)
    116.                         particles[i].update(deltaTime);
    117.                 }
    118.                 if (firstFree < firstActive) {
    119.                     for (i = firstActive; i < particles.length; i++)
    120.                         particles[i].update(deltaTime);
    121.                     for (i = 0; i < firstFree; i++)
    122.                         particles[i].update(deltaTime);
    123.                 }
    124.                 // remove inactive particles
    125.                 while (particles[firstActive].age >= duration && firstActive != firstFree) {
    126.                     firstActive++;
    127.                     if (firstActive == particles.length) firstActive = 0;
    128.                 }
    129.             };
    130.             ParticlePool.prototype.draw = function (context, image) {
    131.                 // draw active particles
    132.                 if (firstActive < firstFree) {
    133.                     for (i = firstActive; i < firstFree; i++)
    134.                         particles[i].draw(context, image);
    135.                 }
    136.                 if (firstFree < firstActive) {
    137.                     for (i = firstActive; i < particles.length; i++)
    138.                         particles[i].draw(context, image);
    139.                     for (i = 0; i < firstFree; i++)
    140.                         particles[i].draw(context, image);
    141.                 }
    142.             };
    143.             return ParticlePool;
    144.         })();
    145.         (function (canvas) {
    146.             var context = canvas.getContext('2d'),
    147.                 particles = new ParticlePool(settings.particles.length),
    148.                 particleRate = settings.particles.length / settings.particles.duration, // particles/sec
    149.                 time;
    150.             // get point on heart with -PI <= t <= PI
    151.             function pointOnHeart(t) {
    152.                 return new Point(
    153.                     160 * Math.pow(Math.sin(t), 3),
    154.                     130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25
    155.                 );
    156.             }
    157.             // creating the particle image using a dummy canvas
    158.             var image = (function () {
    159.                 var canvas = document.createElement('canvas'),
    160.                     context = canvas.getContext('2d');
    161.                 canvas.width = settings.particles.size;
    162.                 canvas.height = settings.particles.size;
    163.                 // helper function to create the path
    164.                 function to(t) {
    165.                     var point = pointOnHeart(t);
    166.                     point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
    167.                     point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;
    168.                     return point;
    169.                 }
    170.                 // create the path
    171.                 context.beginPath();
    172.                 var t = -Math.PI;
    173.                 var point = to(t);
    174.                 context.moveTo(point.x, point.y);
    175.                 while (t < Math.PI) {
    176.                     t += 0.01; // baby steps!
    177.                     point = to(t);
    178.                     context.lineTo(point.x, point.y);
    179.                 }
    180.                 context.closePath();
    181.                 // create the fill
    182.                 context.fillStyle = '#ea80b0';
    183.                 context.fill();
    184.                 // create the image
    185.                 var image = new Image();
    186.                 image.src = canvas.toDataURL();
    187.                 return image;
    188.             })();
    189.             // render that thing!
    190.             function render() {
    191.                 // next animation frame
    192.                 requestAnimationFrame(render);
    193.                 // update time
    194.                 var newTime = new Date().getTime() / 1000,
    195.                     deltaTime = newTime - (time || newTime);
    196.                 time = newTime;
    197.                 // clear canvas
    198.                 context.clearRect(0, 0, canvas.width, canvas.height);
    199.                 // create new particles
    200.                 var amount = particleRate * deltaTime;
    201.                 for (var i = 0; i < amount; i++) {
    202.                     var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
    203.                     var dir = pos.clone().length(settings.particles.velocity);
    204.                     particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
    205.                 }
    206.                 // update and draw particles
    207.                 particles.update(deltaTime);
    208.                 particles.draw(context, image);
    209.             }
    210.             // handle (re-)sizing of the canvas
    211.             function onResize() {
    212.                 canvas.width = canvas.clientWidth;
    213.                 canvas.height = canvas.clientHeight;
    214.             }
    215.             window.onresize = onResize;
    216.             // delay rendering bootstrap
    217.             setTimeout(function () {
    218.                 onResize();
    219.                 render();
    220.             }, 10);
    221.         })(document.getElementById('pinkboard'));
    222.         script>
    223. body>
    224.  
    225. html>

    三、文末🔥

           我是bug菌，一名想走👣出大山改变命运的程序猿。接下来的路还很长，都等待着我们去突破、去挑战。来吧，小伙伴们，我们一起加油！未来皆可期，fighting！

            最后送大家两句我很喜欢的话，与诸君共勉！

    ☘️做你想做的人，没有时间限制，只要愿意，什么时候都可以start。

    🍀你能从现在开始改变，也可以一成不变，这件事，没有规矩可言，你可以活出最精彩的自己。

    ​​​

    💌如果文章对您有所帮助，就请留下您的赞吧！(#^.^#)；

    💝如果喜欢bug菌分享的文章，就请给bug菌点个关注吧！(๑′ᴗ‵๑)づ╭❤～；

    💗如果对文章有任何疑问，还请文末留言或者加群吧；

    💞鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复参与讨论(请勿发表攻击言论，谢谢）；

    💕版权声明：原创不易，转载请附上原文出处链接和本文声明，版权所有，盗版必究！！！谢谢。

  • 相关阅读:
    抽象工厂模式
    ssm基于微信小程序的外卖点餐系统的设计与实现毕业设计-附源码211704
    《Effective C++》知识点（3）--资源管理
    原来Linux makefile可以如此简单
    Jmeter组件作用域及执行顺序
    【高危】GitLab CE/EE 16.0.0存在路径遍历漏洞（存在POC）
    【zlm】 webrtc源码讲解
    java 整合 swagger-ui 步骤
    python执行cmd命令——控制电脑连接wifi——程序打包
    员工离职困扰？来看AI如何解决，基于人力资源分析的 ML 模型构建全方案 ⛵
  • 原文地址：https://blog.csdn.net/weixin_43970743/article/details/127773339