当前位置：首页 > news >正文

HTML李峋同款跳动的爱心代码（双爱心版）

news 2026/1/16 9:04:11

写在前面

跳动的爱心

完整代码

代码分析

系列推荐

最后想说

写在前面

在浩瀚的网络世界中，总有一些小惊喜能触动我们的心弦。今天，就让我们用HTML语言，探索既神秘又浪漫的李峋同款跳动的爱心代码吧。

首先，让我们一起来欣赏一下这个跳动的爱心代码所带来的视觉效果。当这段代码被嵌入到你的网页中时，一个由无数小圆点组成的爱心形状会开始在屏幕上跳动。这些小圆点如同爱情的精灵，在屏幕上翩翩起舞，让人仿佛置身于一个梦幻般的爱情世界。

跳动的爱心

那么，这个跳动的爱心代码是如何实现的呢？其实，它主要利用了HTML的<canvas>元素和JavaScript的绘图功能。通过绘制大量的小圆点，并让它们按照一定的规律进行移动和变化，就能够模拟出爱心跳动的视觉效果。

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Love</title><style>body {filter: blur(0.5px);background: #000;}canvas {display: block;margin: 0 auto;}h1 {color: white;position: absolute;top: 45%;left: 50%;transform: translate(-50%, -50%);text-align: center;font-weight: 400;}</style>
</head><body><!-- <h1><i>Love</i></h1> --><canvas id="heart"></canvas></body></html>
<script>var canvas = document.getElementById("heart");canvas.width = 600;canvas.height = 600;canvas.style.width = canvas.width + "px";canvas.style.height = canvas.height + "px";var context = canvas.getContext("2d");context.translate(canvas.width / 2, canvas.height / 2);context.scale(1, -1);context.moveTo(0, 0);context.fillStyle = 'deeppink'function xin(t, r, j, ws) {this.trans = t;this.rs = r,this.ws = ws,this.index = j,this.x = this.trans * this.ws * Math.sin(this.index) * Math.sin(this.index) * Math.sin(this.index)this.y = this.trans * (16 * Math.cos(this.index) - 5 * Math.cos(2 * this.index) - 2 * Math.cos(3 * this.index) - Math.cos(4 * this.index));}let ws = 18;let hs = 16;let wsSpeed = 1;let hsSpeed = 1;let speed = 1;let wqs = [];let nqs = [];let hxz = [];let hxz2 = [];let dc = [];let xings = [wqs, nqs, hxz, hxz2, dc];sdata();function sdata() {// 外圈for (let j = 0; j < 500; j += speed) {let trans = 9 + Math.random() * 2.5;let size = Math.random() * 2;let xins = new xin(trans, size, j, ws);wqs.push(xins);}// 内圈for (let j = 0; j < 300; j += speed) {let trans = 7 + Math.random() * 5;let size = Math.random() * 2.5;let xins = new xin(trans, size, j, ws);nqs.push(xins);}// 核心轴for (let j = 0; j < 600; j += speed) {let trans = 11 + Math.random() * 2;let size = Math.random() * 3.5;let xins = new xin(trans, size, j, ws);hxz.push(xins);}// 核心轴2for (let j = 0; j < 500; j += speed) {let trans = 0 + Math.random() * 2.7;let size = Math.random() * 2.5;let xins = new xin(trans, size, j, ws);hxz2.push(xins);}setInterval(() => {context.clearRect(-canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height);ws += wsSpeed;if (ws < 16) {wsSpeed *= -1;} else if (ws > 18) {wsSpeed *= -1;}hs += hsSpeed;if (hs < 14) {hsSpeed *= -1;} else if (hs > 16) {hsSpeed *= -1;}hxz.forEach(v => {context.beginPath();context.arc(v.trans * ws * Math.sin(v.index) * Math.sin(v.index) * Math.sin(v.index), v.trans * (hs * Math.cos(v.index) - 5 * Math.cos(2 * v.index) - 2 * Math.cos(3 * v.index) - Math.cos(4 * v.index)), v.rs, 0, Math.PI * 2);context.fill();context.stroke();context.closePath();});hxz2.forEach(v => {context.beginPath();context.arc(v.trans * ws * Math.sin(v.index) * Math.sin(v.index) * Math.sin(v.index), v.trans * (hs * Math.cos(v.index) - 5 * Math.cos(2 * v.index) - 2 * Math.cos(3 * v.index) - Math.cos(4 * v.index)), v.rs, 0, Math.PI * 2);context.fill();context.stroke();context.closePath();});nqs.forEach(v => {context.beginPath();context.arc(v.trans * ws * Math.sin(v.index) * Math.sin(v.index) * Math.sin(v.index), v.trans * (hs * Math.cos(v.index) - 5 * Math.cos(2 * v.index) - 2 * Math.cos(3 * v.index) - Math.cos(4 * v.index)), v.rs, 0, Math.PI * 2);context.fill();context.stroke();context.closePath();});wqs.forEach(v => {context.beginPath();context.arc(v.trans * ws * Math.sin(v.index) * Math.sin(v.index) * Math.sin(v.index), v.trans * (hs * Math.cos(v.index) - 5 * Math.cos(2 * v.index) - 2 * Math.cos(3 * v.index) - Math.cos(4 * v.index)), v.rs, 0, Math.PI * 2);context.fill();context.stroke();context.closePath();});dc = [];// 顶层for (let j = 0; j < 300; j += speed) {let trans = 1 + Math.random() * 20;let size = Math.random() * 2;let xins = new xin(trans, size, j, ws);dc.push(xins);}dc.forEach(v => {context.beginPath();context.arc(v.x, v.y, v.rs, 0, Math.PI * 2);context.fill();context.stroke();context.closePath();});}, 100);}
</script>
<!--音乐代码-->
<audio autoplay="autoplay" loop="loop" preload="auto" src="https://link.hhtjim.com/163/1860578400.mp3"></audio></body></html>

代码分析

在这个代码中，我们定义了多个数组来存储小圆点的位置、大小和颜色等信息。然后，使用setInterval()函数周期性地更新这些小圆点的位置，从而实现了跳动的动画效果。同时，我们还通过调整一些参数来控制爱心的大小、速度和颜色等属性，让你可以根据自己的喜好来定制这个跳动的爱心。小编偷偷告诉你，在代码的第33行可以留下你想写的字哦~

当然，这个跳动的爱心代码并不仅仅是一个简单的视觉效果展示，它还可以被用作一种情感表达的方式。无论是向你的爱人表达爱意，还是向你的访客传递温暖，这个代码都能起到很好的作用，它能够让你的网页变得更加温馨和浪漫，让你的访客在浏览的同时也能感受到你的用心和关怀。

最后，值得一提的是，这个跳动的爱心代码不仅仅适用于个人博客或网站，它还可以被用于各种商业场合，如电商平台的促销页面、企业官网的欢迎页面等。运用这个代码，你可以为你的网页增添一份独特的魅力，吸引更多的访客并提升他们的留存率。

总之，李峋同款跳动的爱心代码是一个既实用又有趣的HTML代码，它不仅能够为你的网页增添一份浪漫的气息，还能够提升用户体验和吸引更多的访客。如果你也想让你的网页变得更加有趣和温馨，不妨尝试一下这个跳动的爱心代码吧！

系列推荐

序号	目录	直达链接
1	HTML实现3D相册	HTML实现3D相册-CSDN博客
2	HTML元素周期表	HTML元素周期表-CSDN博客
3	HTML黑客帝国字母雨	HTML黑客帝国字母雨_字母雨html-CSDN博客
4	HTML五彩缤纷的爱心	HTML五彩缤纷的爱心-CSDN博客
5	HTML飘落的花瓣	HTML飘落的花瓣-CSDN博客
6	HTML哆啦A梦	HTML哆啦A梦_html哆啦a梦代码-CSDN博客
7	HTML爱情树	HTML爱情树-CSDN博客
8	HTML新春烟花盛宴	HTML新春烟花盛宴-CSDN博客
9	HTML想见你	HTML想见你-CSDN博客
10	HTML蓝色爱心	HTML蓝色爱心-CSDN博客
11	HTML跳动的爱心	HTML跳动的爱心-CSDN博客
12	HTML橙色爱心	HTML橙色爱心-CSDN博客
13	HTML大雪纷飞	HTML大雪纷飞-CSDN博客
14	HTML跨年烟花	HTML跨年烟花-CSDN博客
15	HTML跳动的爱心	HTML跳动的爱心-CSDN博客
16	HTML动态爱心	HTML动态爱心-CSDN博客
17	HTML浪漫星空	HTML星空特效-CSDN博客
18	HTML跳动的双爱心	https://want595.blog.csdn.net/article/details/139799806
19
20
21
22
23
24
25
26
27

最后想说

我是一只有趣的兔子，感谢你的喜欢！

HTML李峋同款跳动的爱心代码（双爱心版）

写在前面

跳动的爱心

完整代码

代码分析

系列推荐

最后想说

相关文章：

HTML李峋同款跳动的爱心代码（双爱心版）

【linux】内核从tcp层调用IP层摸索中

Python 中的 Pandas(数据分析与处理)

【文档智能 RAG】RAG增强之路-智能文档解析关键技术难点及PDF解析工具PDFlux

五大API接口：提升你的应用性能与用户体验

RabbitMQ实践——在Ubuntu上安装并启用管理后台

Ubuntu中防火墙的使用和开放关闭端口

ansible 模块进阶及变量

MYSQL数据库安装

Pycharm配置远程调试

【Java面试】二十二、JVM篇（下）：JVM参数调优与排查

统计信号处理基础习题解答10-17

嵌套使用模板类

adb卸载系统应用

Rapidfuzz，一个高效的 Python 模糊匹配神器

【猫狗分类】Pytorch VGG16 实现猫狗分类1-数据清洗+制作标签文件

磁盘管理磁盘介绍 MBR

JSON响应中提取特定的信息——6.14山大软院项目实训2

【C++高阶】高效搜索的秘密：深入解析搜索二叉树

《软件定义安全》之七：SDN安全案例

【Python】 -- 趣味代码 - 小恐龙游戏

线程与协程

大数据零基础学习day1之环境准备和大数据初步理解

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

3-11单元格区域边界定位(End属性)学习笔记

ABAP设计模式之---“简单设计原则(Simple Design)”

AI病理诊断七剑下天山，医疗未来触手可及

LLMs 系列实操科普（1）

【JVM】Java虚拟机（二）——垃圾回收

逻辑回归暴力训练预测金融欺诈