HTML跳动的爱心①

写在前面

这是一个用HTML、CSS和JavaScript编写的动态爱心表白页面。页面中不仅有飘动的心形图案，还有漫天飞舞的粉色爱心文字和一个跳动的爱心图形动画。整个页面充满了浪漫的气息，非常适合用来表达爱意或制作情人节祝福网页。

系列文章

序号	目录
1	HTML满屏跳动的爱心
2	HTML五彩缤纷的爱心
3	HTML满屏漂浮爱心
4	HTML情人节爱心
5	HTML蓝色爱心射线
6	HTML跳动的爱心
7	HTML跳动的双爱心
8	HTML粒子爱心
9	HTML蓝色动态爱心
10	HTML橙色动态粒子爱心
11	HTML旋转爱心
12	HTML爱情树
13	HTML元素周期表
14	HTML飞舞的花瓣
15	HTML星空特效
16	HTML黑客帝国字母雨
17	HTML哆啦A梦
18	HTML流星雨
19	HTML沙漏爱心
20	HTML爱心字母雨
21	HTML爱心流星雨
22	HTML生日蛋糕
23	HTML流光爱心
24	HTML粉色爱心
25	HTML满屏飘字
26	HTML飞舞爱心
27	HTML音乐圣诞树
28	HTML星空圣诞树
29	HTML礼物圣诞树
30	HTML旋转圣诞树
31	HTML旋转相册①
32	HTML旋转相册②
33	HTML旋转相册③
34	HTML大雪纷飞①
35	HTML大雪纷飞②
36	HTML炫酷烟花①
37	HTML炫酷烟花②
38	HTML炫酷烟花③
39	HTML炫酷烟花④
40	HTML炫酷烟花⑤
41	HTML炫酷烟花⑥
42	HTML炫酷烟花⑦
43	HTML炫酷烟花⑧
44	HTML炫酷烟花⑨
45	HTML金色流星雨
敬请期待......

技术需求

Canvas绘图技术

使用HTML5的<canvas>元素进行2D图形绘制，通过getContext("2d")获取绘图上下文，实现对爱心文字和粒子效果的渲染。
利用Canvas的clearRect方法清除画布，配合requestAnimationFrame实现流畅的动画循环。

CSS动画与样式控制

通过CSS3的@keyframes定义心跳动画，使背景中的爱心图形产生缩放效果，增强视觉冲击力。
使用绝对定位和居中布局技巧，确保页面元素在不同屏幕尺寸下都能正确显示。

面向对象编程思想

将爱心文字封装为Heart类，每个实例拥有独立的位置、速度、透明度和缩放属性，便于管理和更新。
粒子系统采用Point、Particle和ParticlePool类结构，实现高效的心形轨迹粒子发射和回收机制。

数学建模与图形算法

心形曲线使用参数方程x = 160 * sin³(t)和y = 130 * cos(t) - 50 * cos(2t) - 20 * cos(3t) - 10 * cos(4t) + 25进行精确建模。
粒子运动遵循物理规律，通过加速度和时间增量计算位置变化，模拟真实的飞行动画。

事件监听与响应式设计

添加窗口大小改变事件监听器，动态调整Canvas尺寸以适应不同设备屏幕。
实现浏览器兼容性的requestAnimationFrame动画函数，保证在各种环境下都能流畅运行。

色彩搭配与视觉层次

预设多种柔和色调（如浅粉、淡蓝、米白等）作为爱心文字的颜色选项，营造温馨浪漫的整体氛围。
通过透明度变化和渐变消失效果，构建丰富的视觉层次感，提升用户体验。

主要代码

创作不易，订阅后可查看完整代码

html 复制代码

<!DOCTYPE html>
<html>
<body>
    <canvas id="pinkboard" width="1920" height="947"></canvas>
    <div id="name">❤萌❤</div>
    <canvas id="canvas" width="1920" height="947"></canvas>
 
    <script type="text/javascript">
        const colors = [
            "#eec996",
            "#8fb7d3",
            "#b7d4c6",
            "#c3bedd",
            "#f1d5e4",
            "#cae1d3",
            "#f3c89d",
            "#d0b0c3",
            "#819d53",
            "#c99294",
            "#cec884",
            "#ff8e70",
            "#e0a111",
            "#fffdf6",
            "#cbd7ac",
            "#e8c6c0",
            "#dc9898",
            "#ecc8ba",
        ];
        var canvas = document.getElementById("canvas");
        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 = 470;
            this.height = 400;
        };
        Heart.prototype.draw = function (i) {
            ctx.globalAlpha = this.opacity;
            ctx.font = `${180 * this.scale}px "微软雅黑"`;
            ctx.fillStyle = colors[i % 18];
            ctx.fillText(
                "❤萌❤",
                this.x - this.width * 0.5,
                this.y - this.height * 0.5,
                this.width,
                this.height
            );
        };

......

创作流程

当我开始构思这个浪漫的表白页面时，脑海中首先浮现的是漫天飞舞的爱心和一颗跳动的心脏。我希望通过技术手段将这份情感可视化，让每一个像素都承载着爱意。

我的第一步是确定整体视觉风格。我选择了深色背景来突出粉色系元素，这种强烈的对比能够更好地吸引注意力。为了让页面不显得单调，我决定采用双Canvas层叠的设计：底层Canvas负责绘制跳动的心形粒子动画，顶层Canvas则展示飘动的文字爱心。

在实现文字爱心动画时，我创建了Heart类来管理每个爱心的行为。我为每个爱心设置了随机的初始位置、移动速度和透明度，这样它们就像在夜空中自由飘荡。为了让动画更自然，我还加入了缩放效果，让爱心从小到大逐渐显现，然后再消失，形成一种呼吸般的节奏感。

对于心形粒子系统，我花费了不少时间研究心形的数学公式。通过参数方程，我可以精确地描绘出完美的心形轮廓。然后我将这个形状作为粒子发射的源头，让无数小爱心沿着心形轨迹飞出，最后逐渐消散。为了让粒子运动更加生动，我给它们添加了加速度和生命周期，模拟出真实的物理运动效果。

在CSS动画部分，我设计了一个心跳效果来增强情感表达。通过关键帧动画，我让背景中的爱心图形产生规律性的缩放，就像是在诉说着怦然心动的感觉。为了让动画在不同浏览器中都能正常运行，我还添加了各种厂商前缀。

为了让整个页面具有良好的适应性，我加入了窗口大小监听功能。无论用户如何调整浏览器窗口，Canvas都会自动调整尺寸，确保动画效果始终处于最佳状态。

在整个创作过程中，我特别注重细节的打磨。比如颜色的选择上，我精心挑选了一系列柔和的粉色系色彩，避免过于刺眼的颜色破坏浪漫氛围。在动画速度的调节上，我也反复测试，找到最舒适自然的运动节奏。

最终，当我看到屏幕上那些粉色爱心在黑暗中翩翩起舞，那颗心形图案在中央轻柔地跳动时，我知道我已经成功地将心中的情感转化为可视化的艺术作品。

写在后面

我是一只有趣的兔子，感谢你的喜欢！希望这个浪漫的页面能帮你传达心意~