HTML爱心代码(附源码)

最新推荐文章于 2026-05-05 12:36:50 发布
原创 最新推荐文章于 2026-05-05 12:36:50 发布 · 1.6k 阅读 · 8 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#html #chrome #前端
该文章已生成可运行项目，

说明：更改效果中的文字只需要更改代码中的第115行即可

效果图：

源码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>LuoAn-777</title>
    <style type="text/css">
        body {
            margin: 0;
            overflow: hidden;
            background: #000;
            
        }
 
        canvas {
            position: absolute;
            width: 100%;
            height: 100%;
        }
 
        #pinkboard {
            animation: anim 1.5s ease-in-out infinite;
            -webkit-animation: anim 1.5s ease-in-out infinite;
            -o-animation: anim 1.5s ease-in-out infinite;
            -moz-animation: anim 1.5s ease-in-out infinite;
        }
 
        @keyframes anim {
            0% {
                transform: scale(0.8);
            }
            25% {
                transform: scale(0.7);
            }
            50% {
                transform: scale(1);
            }
            75% {
                transform: scale(0.7);
            }
            100% {
                transform: scale(0.8);
            }
        }
 
        @-webkit-keyframes anim {
            0% {
                -webkit-transform: scale(0.8);
            }
            25% {
                -webkit-transform: scale(0.7);
            }
            50% {
                -webkit-transform: scale(1);
            }
            75% {
                -webkit-transform: scale(0.7);
            }
            100% {
                -webkit-transform: scale(0.8);
            }
        }
 
        @-o-keyframes anim {
            0% {
                -o-transform: scale(0.8);
            }
            25% {
                -o-transform: scale(0.7);
            }
            50% {
                -o-transform: scale(1);
            }
            75% {
                -o-transform: scale(0.7);
            }
            100% {
                -o-transform: scale(0.8);
            }
        }
 
        @-moz-keyframes anim {
            0% {
                -moz-transform: scale(0.8);
            }
            25% {
                -moz-transform: scale(0.7);
            }
            50% {
                -moz-transform: scale(1);
            }
            75% {
                -moz-transform: scale(0.7);
            }
            100% {
                -moz-transform: scale(0.8);
            }
        }
 
        #name {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin-top: -20px;
            font-size: 46px;
            color: #ea80b0;
        }
    </style>
</head>
<body>
<canvas id="pinkboard" width="1920" height="947"></canvas>
<canvas id="canvas" width="1920" height="947"></canvas>
 
<script type="text/javascript">
    var loverName = "💗TO:豪豪and强弟,以后的路我们一起走💗" 
    const colors = [
        "#eec996",
        "#8fb7d3",
        "#b7d4c6",
        "#c3bedd",
        "#f1d5e4",
        "#cae1d3",
        "#f3c89d",
        "#d0b0c3",
        "#819d53",
        "#c99294",
        "#cec884",
        "#ff8e70",
        "#e0a111",
        "#fffdf6",
        "#cbd7ac",
        "#e8c6c0",
        "#dc9898",
        "#ecc8ba",
    ]; 
    var ctx = canvas.getContext("2d");
    let count = 1;
 
    var ww = window.innerWidth;
    var wh = window.innerHeight;
 
    var hearts = [];
 
    function init() {
        requestAnimationFrame(render);
        canvas.width = ww;
        canvas.height = wh;
        for (var i = 0; i < 100; i++) {
            hearts.push(new Heart());
        }
    }
 
    function Heart() {
        this.x = Math.random() * ww;
        this.y = Math.random() * wh;
        this.opacity = Math.random() * 0.5 + 0.5;
        this.vel = {
            x: (Math.random() - 0.5) * 4,
            y: (Math.random() - 0.5) * 4,
        };
        this.targetScale = Math.random() * 0.15 + 0.02;
        this.scale = this.targetScale * Math.random();
    }
 
    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.fillStyle = colors[i % 18];
        ctx.fillText(
            loverName,
            this.x - this.width * 0.5,
            this.y - this.height * 0.5,
            this.width,
            this.height
        );
 
    };
 
    function render() {
        ctx.clearRect(0, 0, ww, wh);
        for (var i = 0; i < 100; i++) {
            hearts[i].update(i);
            hearts[i].draw(i);
        }
        requestAnimationFrame(render);
    }
 
    init();
    window.addEventListener("resize", function () {
        ww = window.innerWidth;
        wh = window.innerHeight;
    });
</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.75, // play with this for a nice effect
            size: 30, // 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) {
            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);
            }
            while (
                particles[firstActive].age >= duration &&
                firstActive != firstFree
                ) {
                firstActive++;
                if (firstActive == particles.length) firstActive = 0;
            }
        };
        ParticlePool.prototype.draw = function (context, image) {
            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;
    })();
    (function (canvas) {
        var context = canvas.getContext("2d"),
            particles = new ParticlePool(settings.particles.length),
            particleRate =
                settings.particles.length / settings.particles.duration, // particles/sec
            time;
 
        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
            );
        }
        var image = (function () {
            var canvas = document.createElement("canvas"),
                context = canvas.getContext("2d");
            canvas.width = settings.particles.size;
            canvas.height = settings.particles.size;
            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;
            }
            context.beginPath();
            var t = -Math.PI;
            var point = to(t);
            context.moveTo(point.x, point.y);
            while (t < Math.PI) {
                t += 0.01; 
                point = to(t);
                context.lineTo(point.x, point.y);
            }
            context.closePath();
            context.fillStyle = "#ea80b0";
            context.fill();
            var image = new Image();
            image.src = canvas.toDataURL();
            return image;
        })();
        function render() {
            requestAnimationFrame(render);
            var newTime = new Date().getTime() / 1000,
                deltaTime = newTime - (time || newTime);
            time = newTime;
            context.clearRect(0, 0, canvas.width, canvas.height);
            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
                );
            }
            particles.update(deltaTime);
            particles.draw(context, image);
        }
        function onResize() {
            canvas.width = canvas.clientWidth;
            canvas.height = canvas.clientHeight;
        }
 
        window.onresize = onResize;
        setTimeout(function () {
            onResize();
            render();
        }, 10);
    })(document.getElementById("pinkboard"));
 
</script>
 
</body>
</html>

本文章已经生成可运行项目
珞-安
关注
爱心源码（html源码）
12-11
爱心源码（html源码）
HTML满屏跳动的爱心（完整代码）
Python、C++、HTML、Java
06-04 12万+
HTML语言实现满屏跳动爱心的完整代码。
html爱心特效代码
梦游星海的博客
10-26 45万+
<!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语言爱心代码大全集 会Ctrl+C就可以表白了
最新发布
小李学习笔记的博客
05-05 524
博主整理了一个C语言爱心代码大全，里面有C语言爱心代码会动的动态效果和C语言爱心代码大全静态效果，只需复制粘贴就可以用啦！C语言爱心代码大全已备好，你还等什么？用它展示出作为一枚程序员的浪漫！喜欢的话，麻烦给个赞！
三种爱心代码html（文本文档即可实现）
qq_62277763的博客
11-30 4万+
爱心代码，直接复制在文本文档中，改后缀可以运行。
html+css+js爱心代码
jiangcr123的博客
11-06 1万+
最近好像爱心代码很火
html动态爱心代码【四】(附源码)
weixin_74268571的博客
08-22 1万+
内含完整源码，动态效果，利用画布动态画出，可用编译器，也可记事本开发，简单实用
html动态爱心代码【一】（附源码）
weixin_74268571的博客
08-22 4万+
HTML动态爱心特效代码，内含完整源码，可以记事本简单开发
html动态爱心代码【三】(附源码)
weixin_74268571的博客
08-22 7964
内含完整源码，大家可以用各种HTML编译器，也可直接用记事本开发，改后缀为html即可。
爱心气泡表白代码-HTML【附源码】
qiao_yue的博客
02-12 1194
每戳破一颗爱心气泡，都会有一句专属于你的情话悄然绽放~愿天下有情人终成眷属
html动态爱心代码【附源码】
weixin_74268571的博客
03-13 2545
【代码】计时器的使用及爱心演示。完整代码案例，可使用记事本开发，简单实用
用html写爱心2种方法源代码
专注java二开部署
01-03 1万+
一、在HTML中，我们可以使用许多方法来创建爱心。这段代码将创建一个红色的动态旋转爱心。动画效果是通过CSS的。这段代码将创建一个红色的爱心。颜色属性来改变爱心的颜色，通过更改。属性的参数来调整动画的速度和效果。
两款HTML动态爱心代码
qq_42003636的博客
02-20 9040
使用方法：将源码保存为对应的index.html用浏览器打开index.html即可。
HTML爱心表白代码，亲测有效，独一无二！福利来啦！
chenzhi0122的博客
06-16 9303
这次我们来分享跳动的爱心的代码，网上有很多，但是个人觉得我这个比较温馨一点，背景也好看。如果觉得文章不错，还请一键三联，不定时发布各种全免费的独一无二的代码！发福利啦~小编最近搜集了好几个表白代码，感兴趣可以点进主页看看哟~
HTML 动态爱心代码
weixin_57206174的博客
11-20 8万+
超级简单的动态爱心代码，手中有电脑即可完成。大家不要试图用这个去表白，说实话过于土味！
html爱心
weixin_35750953的博客
12-17 5546
HTML爱心是一种利用HTML语言创建的爱心形状图案。它可以通过使用HTML标签和CSS样式在网页上呈现出来。 要创建HTML爱心，可以使用HTML标签<div>和<span>来分别表示爱心的两个半圆。可以使用CSS样式控制这些标签的形状、大小、颜色等属性，从而达到创建爱心的目的。 例如，可以使用以下代码来创建一个爱心： <style> .heart { ...
html爱心表白代码（最全）
热门推荐
皮小孩的博客
12-20 48万+
皮小孩的个人主页（8.1更新）需要本文前12个表白代码可以进链接扫码下载—>>>网页爱心表白代码大全扫码支付成功后会得到百度网盘链接和提取码，里面有本文的前12个表白代码，每个代码都有详细的使用说明，教你怎么修改文字、照片、背景音乐等。购买过程中有问题请及时联系qq1975728171.（比如：购买链接失效、购买后没有百度网盘链接、无法使用支付宝支付等等问题）对象生日快乐祝福代码—>>>html生日快乐代码和ta在一起100天纪念代码—>>>相爱xxx天纪念html代码。
html爱心表白代码（最全）_爱心代码html
2401_87556704的博客
11-09 1万+
本文共有14个表白效果，几乎每个代码都有详细的使用说明和独立的支付入口，扫码支付成功后会得到该资源的百度网盘链接和提取码。如果你用电脑，直接打开手机支付宝扫码支付成功后刷新页面即可；如果你用手机，那么把支付页面截图再去支付宝扫一扫，支付成功同样会得到链接和提取码，这时候只需要选择复制链接，记住提取码就可以复制到网上提取了。每个代码的效果都是以动图形式展示，有些效果不能完全展示，可以通过视频看部分代码组合效果—>>>程序员表白代码组合视频展示效果1：可以进社区下载—>>>效果1——爱心跳动资源。
H5炫酷特效系列2——canvas特效-炫酷的心
小圣贤君的博客
07-29 7826
之前已经有了一个满屏幕红心的案例，这次带来一个更加炫酷的心型炫酷动效，直接上图，有兴趣的就继续往下看，没兴趣直接过。 屏幕上眼花缭乱的心，不停的冲击着你的视线，让那些少女心砰砰直跳，绝对表白利器，同志们可以直接拿去给中意的姑娘看哦。 直接将下面的代码复制运行就可以看到效果：<!DOCTYPE html> <html><head> <meta charset="utf-8"> <tit
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值