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

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

news 2025/7/7 1:55:05

目录

写在前面

跳动的爱心

完整代码

代码分析

系列推荐

最后想说

写在前面

在浩瀚的网络世界中，总有一些小惊喜能触动我们的心弦。今天，就让我们用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

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2025/7/6 18:31:17

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

编程新知 2025/6/25 22:08:54

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/6/25 4:08:42

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...

编程新知 2025/7/6 6:50:42

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

编程新知 2025/7/4 21:10:20

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...

编程新知 2025/6/25 4:33:04

恶补电源：1.电桥

一、元器件的选择 搜索并选择电桥&#xff0c;再multisim中选择FWB&#xff0c;就有各种型号的电桥: 电桥是用来干嘛的呢&#xff1f; 它是一个由四个二极管搭成的“桥梁”形状的电路&#xff0c;用来把交流电&#xff08;AC&#xff09;变成直流电&#xff08;DC&#xff09;。…...

编程新知 2025/7/6 4:16:34

向量几何的二元性：叉乘模长与内积投影的深层联系

在数学与物理的空间世界中&#xff0c;向量运算构成了理解几何结构的基石。叉乘&#xff08;外积&#xff09;与点积&#xff08;内积&#xff09;作为向量代数的两大支柱&#xff0c;表面上呈现出截然不同的几何意义与代数形式&#xff0c;却在深层次上揭示了向量间相互作用的…...

编程新知 2025/7/6 1:45:59

【java面试】微服务篇

【java面试】微服务篇 一、总体框架二、Springcloud&#xff08;一&#xff09;Springcloud五大组件&#xff08;二&#xff09;服务注册和发现1、Eureka2、Nacos &#xff08;三&#xff09;负载均衡1、Ribbon负载均衡流程2、Ribbon负载均衡策略3、自定义负载均衡策略4、总结 …...

编程新知 2025/7/3 15:12:53

大数据驱动企业决策智能化的路径与实践

&#x1f4dd;个人主页&#x1f339;&#xff1a;慌ZHANG-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 一、引言&#xff1a;数据驱动的企业竞争力重构 在这个瞬息万变的商业时代&#xff0c;“快者胜”的竞争逻辑愈发明显。企业如何在复杂环…...

编程新知 2025/7/4 21:05:43