【拥有自己独特的动态爱心是一种什么体验，含源码】

已于 2022-11-14 20:22:38 修改
阅读量198 收藏
点赞数 1
分类专栏： 前端知识点 JAVA编程 文章标签： java 动态爱心 javascript
于 2022-11-14 20:15:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_72612071/article/details/127854344
版权

目录

前言

仓库地址

网页效果展示

代码

前言

最近随着电视剧《点燃我温暖你》的火热播出，剧中帅气学霸李洵的炫酷爱心代码也迅速火出了圈，作为一个喜欢动手实践的我来说正是一个大好机会啊，于是我就把代码搬到了自己的网站上，源码我也放在了我的Gitee上，大家有需自取哦~💗

仓库地址

 https://gitee.com/the-sky-tower/dynamic-love.git

 这里可以修改标题和模板音乐。

网页效果展示

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>heartLove</title>

    <link rel="shortcut icon" href="https://s10.aconvert.com/convert/p3r68-cdx67/a5fmg-k3nhq-001.ico" type="image/x-icon">
    <!-- <link rel="stylesheet" href="style.css"> -->
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background: #000;
            background-size: cover;
            height: 100vh;
        }

        body::after {
            content: '';
            display: block;
            position: absolute;
            width: 100%;
            height: 100vh;
            -webkit-background-color: rgba(0, 0, 0, .5);//黑色半透明
        background-color: rgba(0, 0, 0, .5);
        }

        audio,
        .love_you {
            position: absolute;
            left: 50%;
            top: 1.5rem;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            z-index: 1809185784;
        }

        .love_you {
            top: 45%;
            font-family: Georgia, 'Times New Roman', Times, serif;
            font-size: 1.3rem;
            font-weight: bold;
            color: #ffc0cb;
            letter-spacing: .05rem;
            -moz-animation: love-xf 1.2s alternate ease-in-out;
            -webkit-animation: love-xf 1.2s alternate ease-in-out;
            animation: love-xf 1.2s alternate ease-in-out;
            user-select: none;
            -webkit-text-shadow: 0 0 8px #fff;
            text-shadow: 0 0 8px #fff;
        }

        #lovexf {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 520;
        }

        @keyframes love-xf {
            0% {
                opacity: 0.08;
                filter: blur(8px);
                letter-spacing: .1rem;
            }

            100% {
                opacity: 1;
                filter: blur(0);
                letter-spacing: .05rem;
            }
        }
    </style>

</head>
<body>

<!-- 这里修改名字 -->
<p class="love_you" align="center">XXX<br>星辰大海</p>
<!-- 这里替换音乐 -->
<audio id="music" src="xcdh.mp3" autoplay loop="false" autostart></audio>
<canvas id="lovexf"></canvas>
<script src="https://player.xfyun.club/love-wuminjun/love.click.js"></script>
<script>
    var settings = {
        particles: {
            length: 500, // maximum amount of particles
            duration: 2, // particle duration in sec
            velocity: 100, // particle velocity in pixels/sec
            effect: -0.6, // play with this for a nice effect
            size: 28, // particle size in pixels
        },
    };

    (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;
    })();

    /*
     * Particle class
     */
    var Particle = (function () {
        function Particle() {
            this.position = new Point();
            this.velocity = new Point();
            this.acceleration = new Point();
            this.age = 0;
        }
        Particle.prototype.initialize = function (x, y, dx, dy) {
            this.position.x = x;
            this.position.y = y;
            this.velocity.x = dx;
            this.velocity.y = dy;
            this.acceleration.x = dx * settings.particles.effect;
            this.acceleration.y = dy * settings.particles.effect;
            this.age = 0;
        };
        Particle.prototype.update = function (deltaTime) {
            this.position.x += this.velocity.x * deltaTime;
            this.position.y += this.velocity.y * deltaTime;
            this.velocity.x += this.acceleration.x * deltaTime;
            this.velocity.y += this.acceleration.y * deltaTime;
            this.age += deltaTime;
        };
        Particle.prototype.draw = function (context, image) {
            function ease(t) {
                return (--t) * t * t + 1;
            }
            var size = image.width * ease(this.age / settings.particles.duration);
            context.globalAlpha = 1 - this.age / settings.particles.duration;
            context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);
        };
        return Particle;
    })();

    /*
     * ParticlePool class
     */
    var ParticlePool = (function () {
        var particles,
            firstActive = 0,
            firstFree = 0,
            duration = settings.particles.duration;

        function ParticlePool(length) {
            // create and populate particle pool
            particles = new Array(length);
            for (var i = 0; i < particles.length; i++)
                particles[i] = new Particle();
        }
        ParticlePool.prototype.add = function (x, y, dx, dy) {
            particles[firstFree].initialize(x, y, dx, dy);

            // handle circular queue
            firstFree++;
            if (firstFree == particles.length) firstFree = 0;
            if (firstActive == firstFree) firstActive++;
            if (firstActive == particles.length) firstActive = 0;
        };
        ParticlePool.prototype.update = function (deltaTime) {
            var i;

            // update active particles
            if (firstActive < firstFree) {
                for (i = firstActive; i < firstFree; i++)
                    particles[i].update(deltaTime);
            }
            if (firstFree < firstActive) {
                for (i = firstActive; i < particles.length; i++)
                    particles[i].update(deltaTime);
                for (i = 0; i < firstFree; i++)
                    particles[i].update(deltaTime);
            }

            // remove inactive particles
            while (particles[firstActive].age >= duration && firstActive != firstFree) {
                firstActive++;
                if (firstActive == particles.length) firstActive = 0;
            }


        };
        ParticlePool.prototype.draw = function (context, image) {
            // draw active particles
            if (firstActive < firstFree) {
                for (i = firstActive; i < firstFree; i++)
                    particles[i].draw(context, image);
            }
            if (firstFree < firstActive) {
                for (i = firstActive; i < particles.length; i++)
                    particles[i].draw(context, image);
                for (i = 0; i < firstFree; i++)
                    particles[i].draw(context, image);
            }
        };
        return ParticlePool;
    })();

    /*
     * Putting it all together
     */
    (function (canvas) {
        var context = canvas.getContext('2d'),
            particles = new ParticlePool(settings.particles.length),
            particleRate = settings.particles.length / settings.particles.duration, // particles/sec
            time;

        // get point on heart with -PI <= t <= PI
        function pointOnHeart(t) {
            return new Point(
                160 * Math.pow(Math.sin(t), 3),
                130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25
            );
        }

        // creating the particle image using a dummy canvas
        var image = (function () {
            var canvas = document.createElement('canvas'),
                context = canvas.getContext('2d');
            canvas.width = settings.particles.size;
            canvas.height = settings.particles.size;
            // helper function to create the path
            function to(t) {
                var point = pointOnHeart(t);
                point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
                point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;
                return point;
            }
            // create the path
            context.beginPath();
            var t = -Math.PI;
            var point = to(t);
            context.moveTo(point.x, point.y);
            while (t < Math.PI) {
                t += 0.01; // baby steps!
                point = to(t);
                context.lineTo(point.x, point.y);
            }
            context.closePath();
            // create the fill
            // context.fillStyle = '#c88ffe';
            context.fillStyle = '#dc0f62';//ec3622  ffc0cb dc0f62
            context.fill();
            // create the image
            var image = new Image();
            image.src = canvas.toDataURL();
            return image;
        })();

        // render that thing!
        function render() {
            // next animation frame
            requestAnimationFrame(render);

            // update time
            var newTime = new Date().getTime() / 1000,
                deltaTime = newTime - (time || newTime);
            time = newTime;

            // clear canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

            // create new particles
            var amount = particleRate * deltaTime;
            for (var i = 0; i < amount; i++) {
                var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
                var dir = pos.clone().length(settings.particles.velocity);
                particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
            }

            // update and draw particles
            particles.update(deltaTime);
            particles.draw(context, image);
        }

        // handle (re-)sizing of the canvas
        function onResize() {
            canvas.width = canvas.clientWidth;
            canvas.height = canvas.clientHeight;
        }
        window.onresize = onResize;

        // delay rendering bootstrap
        setTimeout(function () {
            onResize();
            render();
        }, 10);

        // 点击播放音乐

        canvas.onclick = function () {
            // console.log(music);
            if (music.paused) {
                document.body.style.backgroundColor = '#ffd1cd'//FF6EC7 bcebbd
                // 播放音乐
                music.play()
            } else {
                // 暂停音乐
                music.pause()
                // document.body.style.backgroundColor = '#bcebbd'
            }
        }
    })(document.getElementById('lovexf'));


</script>

</body>
</html>

 

居然天上楼
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
动态爱心表白代码 html js网页源代码 情人节送女友礼物 浪漫编程 程序员表白 《点燃我温暖你》
12-02
动态爱心表白代码 html js网页源代码 情人节送女友礼物 浪漫编程，七夕程序员表白Html代码 表白的套路很多，但都少不了送花送礼物，作为一个程序员，搞不懂现在流行的泡泡机、小猪、重力感应车等玩具，也不想去让朋友们去送钱炫耀，毕竟真情才重要，钱就物质了。这些表白代码，在电脑上敲上几行代码，让她在郁闷的周一得到一个大大的惊喜，很简单，一看就会，如果现在用不到也不要紧，先收藏起来，反正这样的节日很多，以后用的时候能找到。
❤️动态爱心代码合集❤️
AllenIverrui的博客
01-27 9330
动态爱心代码合集c++ ,phthon,javascript
❤️动态爱心代码合集❤️，浪漫和炫酷的爱心代码，可直接运行
最新发布
yaosichengalpha的博客
05-02 528
❤️动态爱心代码合集❤️，浪漫和炫酷的爱心代码，可直接运行
python爱心代码源码
YING_YING_DESU的博客
03-15 1626
python从源码开始学好吧
html爱心特效代码
热门推荐
梦游星海的博客
10-26 44万+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywor...
纯C语言实现动态爱心（详解，初学者也能看懂）
qq_65641647的博客
01-07 2万+
动态爱心，你的表白神器，内附源码，初学者也能看懂的代码，快来试试吧！！！
51套经典企业网站源码（一）
08-24
0001-2科技发展有限公司升级版源码 0001科技发展有限公司修正版源码 0002机械配件制造销售公司修正版源码 0003家具地板公司修正版源码 0004-1机械有限公司修正版源码 0004机械有限公司修正版源码 0005机械产品公司...
一个完整的视频APP源码，
04-16
一个完整的视频APP源码，服务器代码，和客户端代码都有，SQL库自己导 进就可以看到视频内家 ，基本的功能都有了，适合新手入门学习思路，不是一般的小的demo,是一个完整的好的视频app源码，有想要的这方面的自己下载...
C#开发opcserver含源码
01-24
一、32位操作系统，执行 OPCdist 库文件\opcdist\ 目录下的setupxp.bat 如果是64位的系统，请自己修改setupxp.bat批处理文件，我的操作系统是win7X64,是可以成功的. 二、建立自己的C#工程.并将Wtopcsvr9.0\Wtopcsvr...
自己写的一个VB进度条控件（附源码）
10-09
自己写的一个VB进度条控件（附源码） 只用了几个Label就搭建了一个看上去比较完美的进度条控件，效果和稳定性不低于系统的，最重要的是你可以包含到自己工程里，这样发布时就不要另外再带个ocx文件啦！ 代码比较...
一元云购源码云购源码夺宝 程序源码
05-25
一元云购源码云购源码夺宝 程序源码，3.17版本的。现在共享出来给大家研究，源码内图片删掉了，里面有点bug也需要自己解决，介意者请绕道
爱心版-表白源代码html动态图
04-01
爱心版-表白源代码html动态图 效果演示http://www.lmtaolu.cn/biaobai/aixin/
HTML5动态心形动画
03-11
本压缩包需要7—zip解压！ 资源内容为HTML5制作的一个动态的心形HTML5动画
爱心特效源码
08-22
爱心特效，完美实现，快拿去对心爱的人表白吧，祝你成功！
一个基于html的心形代码.zip
05-18
一个基于html的心形代码
js 动态心形
01-09
直接用浏览器打开可以看到一颗心的生成动画，可支持手机查看，Android手机可以浏览器直接打开，iOS手机需拷贝上传至百度云查看。。。，代码中包含特殊符号，可以用任何编辑器编辑保存，修改其中click值可以改为你想改的字...
动态爱心表白代码（绝对炫酷）
瓶邪
05-15 7万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言二、使用步骤1.引入库 前言 学习了c后你是否也想在npy面前大秀一把，这串代码或许是你的不错选择 在这里插入代码片 提示：以下是本篇文章正文内容，下面案例可供参考 二、使用步骤 1.引入库 该处使用的url网络请求的数据。 --- # 总结 提示：这里对文章进行总结： 效果如图（动态的哟） ...
动态爱心代码（pathon html）
chenjiayi___的博客
12-21 2630
爱心代码
3D动感表白爱心升级版+源码
c_lanxiaofang的博客
11-11 1230
最近听说很火的一个爱心，背景是黑色的，蛮好看的，然后我加工改了一下，我感觉喜欢这种3D动感的，粉色蓝色搭配绝绝子。复制修改运行代码，给心爱的ta来个不一样的表白吧~~~：html代码，保存到本地，用html后缀保存，再用浏览器打开即可。
用c语言写一个动态爱心源码
06-11
下面是一个简单的用C语言实现动态爱心的代码： ```c #include #include #include #include #include void main() { int x, y, i, j; float a, b, c; char ch[] = "I Love You"; system("color 0c"); // ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

居然天上楼

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

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

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

打赏作者

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

抵扣说明：

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

余额充值