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

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

news 2026/5/15 4:49:55

目录

写在前面

跳动的爱心

完整代码

代码分析

系列推荐

最后想说

写在前面

在浩瀚的网络世界中，总有一些小惊喜能触动我们的心弦。今天，就让我们用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代码，它不仅能够为你的网页增添一份浪漫的气息，还能够提升用户体验和吸引更多的访客。如果你也想让你的网页变得更加有趣和温馨，不妨尝试一下这个跳动的爱心代码吧！

系列推荐

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

最后想说

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

相关文章：

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

目录 写在前面 跳动的爱心 完整代码 代码分析 系列推荐 最后想说 写在前面 在浩瀚的网络世界中&#xff0c;总有一些小惊喜能触动我们的心弦。今天&#xff0c;就让我们用HTML语言&#xff0c;探索既神秘又浪漫的李峋同款跳动的爱心代码吧。 首先&#xff0c;让我们一起…...

编程日记 2024/6/19 21:35:20

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

合入代码&#xff1a; 登录 - Gitee.comhttps://gitee.com/r77683962/linux-6.9.0/commit/f5a93955e16d148a70f98e0f300f455b3ab594f3 这是运行日志&#xff1a; https://gitee.com/r77683962/linux-6.9.0/raw/master/test_log/kern_tcp_ip.log 日志截取部分&#xff08;也…...

编程日记 2024/6/19 21:33:18

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

Pandas 是 Python 中最受欢迎的数据处理库之一&#xff0c;其名字源自于“Panel Data”&#xff08;面板数据&#xff09;的缩写。它提供了三种主要的数据结构&#xff1a;Series &#xff0c; DataFrame &#xff0c; Panel&#xff08;在新版本已经被弃用&#xff09; 数…...

编程日记 2024/6/19 21:32:17

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

前言 在私域知识问答和企业知识工程领域&#xff0c;结合Retrieval-Augmented Generation&#xff08;RAG&#xff09;模型和大型语言模型&#xff08;LLM&#xff09;已成为主流方法。然而&#xff0c;企业中存在着大量的PDF文件&#xff0c;PDF解析的低准确性显著影响了基于…...

编程日记 2024/6/19 21:31:15

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

引言&#xff1a; 简述API接口的重要性引入API接口对于提升应用性能和用户体验的贡献 API接口简介&#xff1a; 定义&#xff1a;解释什么是API接口作用&#xff1a;概述API接口在软件开发中的作用 1. 数据访问API 功能描述&#xff1a;提供快速、安全的数据存取功能提升性…...

编程日记 2024/6/19 21:30:14

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

大纲 环境安装启动管理后台 RabbitMQ是一款功能强大、灵活可靠的消息代理软件&#xff0c;为分布式系统中的通信问题提供了优秀的解决方案。无论是在大规模数据处理、实时分析还是微服务架构中&#xff0c;RabbitMQ都能发挥出色的性能&#xff0c;帮助开发者构建高效、稳定的系…...

编程日记 2024/6/19 21:29:11

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

目录 1.查看防火墙的状态 2.开启ufw防火墙 3.重启ufw防火墙 4.关闭ufw防火墙 5.设置外来访问默认权限 6.开放普通端口 7.关闭普通端口 8.开放规定协议的端口 9.关闭指定协议端口 10.重启防火墙&#xff0c;是配置生效 1.查看防火墙的状态 sudo ufw status 2.开启uf…...

编程日记 2024/6/19 21:28:10

ansible 模块进阶及变量

yum 模块进阶 - name: install pkgs hosts: webservers tasks: - name: install web pkgs # 此任务通过yum安装三个包 yum: name: httpd,php,php-mysqlnd state: present # 根据功能等&#xff0c;可以将一系列软件放到一个组中&#xff0c;安装软件包组&#xff0c;将会把很…...

编程日记 2024/6/19 21:27:09

MYSQL数据库安装

一.编译安装MySQL服务 1.安装环境依赖包 2.将安装mysql 所需软件包传到/opt目录下 mysql-boost-5.7.44.tar tar zxvf mysql-boost-5.7.44.tar.gz 3.配置软件模块 cd /opt/mysql-5.7.44/ cmake \ -DCMAKE_INSTALL_PREFIX/usr/local/mysql \ -DMYSQL_UNIX_ADDR/usr/local/mysq…...

编程日记 2024/6/19 21:26:07

Pycharm配置远程调试

第1步&#xff1a;添加SSH Inerpreter 打开Settings --> Project interpreter配置项&#xff0c;配置如下两项 Project Interpreter添加SSH inerpreter 首次使用的远程环境需要填写ip及账号密码&#xff0c;建立ssh连接&#xff0c;然后选择对应的远端python路径 Path mapp…...

编程日记 2024/6/19 21:25:06

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

文章目录 1、JVM的参数在哪里设置2、常见的JVM调优参数有哪些3、常见的JVM调优工具有哪些4、Java内存泄漏的排查思路5、CPU飙高的排查思路 1、JVM的参数在哪里设置 war包部署&#xff0c;在tomcat中设置&#xff0c;修改TOMCAT_HOME/bin/catalina.sh 文件 jar包启动&#xff0…...

编程日记 2024/6/19 21:24:05

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

题目&#xff1a; 在选择不含信息的或者不假设任何先验知识的先验PDF时,我们需要从数据中得到最大的信息量。在这种方式下,数据是了解未知参数的主要贡献者。利用习题10.15的结果,这种方法可以通过选择使I最大的来实现。对于例10.1的高斯先验PDF,该如何选择和2使得 是不含信息…...

编程日记 2024/6/19 21:23:03

嵌套使用模板类

#include<iostream> using namespace std;template <class Datatype> class Stack { private:Datatype* items;//栈数组int stacksize;//栈的实际大小int top;//栈顶指针 public://构造函数&#xff1a;1&#xff09;分配栈数组内存&#xff0c;2&#xff09;把栈顶…...

编程日记 2024/6/19 21:21:01

adb卸载系统应用

1.进入shell adb shell2.查看所有包 pm list packages3.查找包 如查找vivo相关的包 pm list packages | grep vivo发现包太多了,根本不知道哪个是我们想卸载的应用 于是可以打开某应用,再查看当前运行应用的包名 如下: 4.查找当前前台运行的包名 打开某应用,在亮屏状态输入 …...

编程日记 2024/6/19 21:19:59

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

目录 01初识 Rapidfuzz 什么是 Rapidfuzz？ 为什么选择 Rapidfuzz？ 安装 Rapidfuzz 配置 Rapidfuzz 02基本操作 简单比率计算 03高级功能 查找单个最佳匹配 查找多个最佳匹配 使用阈值优化性能 04实战案例…...

编程日记 2024/6/19 21:17:55

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

Pytorch 猫狗分类 用Pytorch框架&#xff0c;实现分类问题&#xff0c;好像是学习了一些基础知识后的一个小项目阶段&#xff0c;通过这个分类问题&#xff0c;可以知道整个pytorch的工作流程是什么&#xff0c;会了一个分类&#xff0c;那就可以解决其他的分类问题&#xff0…...

编程日记 2024/6/19 21:16:53

磁盘管理 磁盘介绍 MBR

track&#xff1a;磁道&#xff0c;就是磁盘上同心圆&#xff0c;从外向里&#xff0c;依次1号、2号磁道..... sector&#xff1a;扇区&#xff0c;将磁盘分成一个一个扇形区域&#xff0c;每个扇区大小是512字节&#xff0c;从外向里&#xff0c;依次是1号扇区、2号扇区... cy…...

编程日记 2024/6/19 21:13:48

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

在收到的JSON响应中提取特定的信息&#xff08;如response字段中的文本&#xff09;并进行输出&#xff0c;需要进行JSON解析。在Unity中&#xff0c;可以使用JsonUtility进行简单的解析&#xff0c;但由于JsonUtility对嵌套对象的支持有限&#xff0c;通常推荐使用第三方库如N…...

编程日记 2024/6/19 21:12:46

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

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;C “ 登神长阶 ” &#x1f921;往期回顾&#x1f921;&#xff1a;C多态 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀二叉搜索树 &#x1f4d2;1. 二叉搜索树&…...

编程日记 2024/6/19 21:11:44

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

第7章 SDN安全案例 1.DDoS缓解 1.1 Radware DefenseFlow/Defense4All Radware在开源的SDN控制器平台OpenDaylight&#xff08;ODL&#xff09;上集成了一套抗DDoS的模块和应用&#xff0c;称为Defense4ALL。其架构如下图&#xff0c;主要有两部分&#xff1a;控制器中的安全…...

编程日记 2024/6/19 21:10:43

Agent史上最全八股，来啦！

涉及到 RAG、MCP、Skills 等 12 个方向&#xff0c;共计 200 多个问题。 因为最近一段时间&#xff0c;我越来越明显地感觉到&#xff0c;前端 AI 方面的面试已经越来越倾向语 AI 化了。 以前很多同学去面试&#xff0c;面试官问的还是比较浅的东西。 你用过哪些大模型&#xf…...

编程新知 2026/5/15 4:45:13

ARMv8/v9架构ID_AA64ISAR3_EL1寄存器详解与应用

1. AArch64指令集属性寄存器ID_AA64ISAR3_EL1概述 在ARMv8/v9架构中&#xff0c;ID_AA64ISAR3_EL1是一个关键的系统寄存器&#xff0c;它属于AArch64指令集属性寄存器家族。这个64位寄存器专门用于描述处理器在AArch64执行状态下实现的各种指令集扩展特性。作为ARM架构的标准实…...

编程新知 2026/5/15 4:43:05

数据科学协作新范式：构建可复现、可追溯的“小宇宙”项目

1. 项目概述&#xff1a;从“小宇宙”到数据科学协作的范式革新最近在GitHub上闲逛&#xff0c;发现了一个挺有意思的项目——datawhalechina/tiny-universe。乍一看这个名字&#xff0c;“小宇宙”&#xff0c;感觉有点玄乎&#xff0c;但点进去仔细研究后&#xff0c;发现它远…...

编程新知 2026/5/15 3:14:20

opencode无网环境-引用上下文失效问题

问题 由于公司在内网环境开发&#xff0c;没有网络&#xff0c;安装了 opencode 后发现用 无法自动索引出项目文件&#xff0c;导致每次要指定项目文件的时候都得复制全路径。 环境 opencode1.3.6 原因 opencode 是用 ripgrep 扫描和索引文件系统的&#xff0c;启动 open…...

编程新知 2026/5/15 1:23:36

5分钟搞定网页视频下载：VideoDownloadHelper免费插件终极指南

5分钟搞定网页视频下载&#xff1a;VideoDownloadHelper免费插件终极指南 【免费下载链接】VideoDownloadHelper Chrome Extension to Help Download Video for Some Video Sites. 项目地址: https://gitcode.com/gh_mirrors/vi/VideoDownloadHelper 你是否经常遇到这样…...

编程新知 2026/5/15 0:15:44

从硬盘拷贝文件到内存，CPU真的在摸鱼吗？深入聊聊DMA背后的性能优化哲学

从硬盘拷贝文件到内存&#xff0c;CPU真的在摸鱼吗&#xff1f;深入聊聊DMA背后的性能优化哲学 当你从硬盘拷贝一个10GB的电影文件到内存时&#xff0c;系统监控显示CPU占用率几乎没变化——这似乎违背直觉。难道CPU真的在"摸鱼"&#xff1f;实际上&#xff0c;这背后…...

编程新知 2026/5/14 23:20:39

UP Squared 6000全能工业创客板：从AIoT到机器人的模块化开发实战

1. 项目概述&#xff1a;一块能“上得厅堂&#xff0c;下得厨房”的工业创客板最近在规划一个边缘AI视觉项目&#xff0c;选型时又看到了研扬科技UP系列的身影。这个系列在工业计算和创客圈子里一直挺有名气&#xff0c;属于那种“皮实耐造”的代表。不过&#xff0c;这次他们新…...

编程新知 2026/5/14 23:14:19

QR码修复终极指南：三步法从损坏图片到完整数据恢复

QR码修复终极指南&#xff1a;三步法从损坏图片到完整数据恢复 【免费下载链接】qrazybox QR Code Analysis and Recovery Toolkit 项目地址: https://gitcode.com/gh_mirrors/qr/qrazybox 你是否遇到过这样的情况&#xff1a;打印的二维码被咖啡渍污染、手机拍摄的二维…...

编程新知 2026/5/14 20:32:00

从零构建现代化Web组件库：架构设计、开发实践与工程化指南

1. 项目概述&#xff1a;从零到一理解现代Web组件库如果你是一名前端开发者&#xff0c;或者正在构建一个需要大量交互界面的Web应用&#xff0c;那么“组件库”这个词对你来说一定不陌生。今天我们不聊那些耳熟能详的巨头库&#xff0c;而是聚焦于一个更具象、更贴近实际开发场…...

编程新知 2026/5/14 20:29:52

芯片封装表面溢胶缺陷检测技术【附代码】

✨ 长期致力于小目标检测、YOLOv5s-SOP、Unet-glue、OpenCV、Matlab-GUI研究工作&#xff0c;擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅ 如需沟通交流&#xff0c;点击《获取方式》 &#xff08;1&#xff09;基于Zemax仿真的图像采集装置…...

编程新知 2026/5/14 19:58:16