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

news2024/11/19 17:49:49

目录

写在前面

跳动的爱心

完整代码

代码分析

系列推荐

最后想说

写在前面

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

		// 核心轴2
		for (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

最后想说

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1838386.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【NOI-题解】1431. 迷宫的第一条出路

【NOI-题解】1431. 迷宫的第一条出路

文章目录 一、前言二、问题问题&#xff1a;1431. 迷宫的第一条出路 三、感谢 一、前言 二、问题 问题&#xff1a;1431. 迷宫的第一条出路 类型&#xff1a;深度搜索、回溯、路径打印 题目描述&#xff1a; 已知一 NN 的迷宫&#xff0c;允许往上、下、左、右四个方向行走…
阅读更多...
网卡故障但bond0不切换原因及处理、脚本监控bond0网卡状态并做相应操作

网卡故障但bond0不切换原因及处理、脚本监控bond0网卡状态并做相应操作

文章目录 故障说明监控脚本脚本编写脚本测试正常场景异常场景1异常场景2脚本准备和修改网卡名脚本拷贝到所有需要监控主机修改网卡名批量执行脚本故障说明 在一次交换机升级的割接中，主备交换机重启的时候，我们发现了一个问题，有几台宿主机会中断【ping不通】，交换机重启完…
阅读更多...
类的继承性（Java）

类的继承性（Java）

本篇学习面向对象语言的第二特性——继承性。 1 .为什么需要继承 我们来举个例子&#xff1a;我们知道动物有很多种&#xff0c;是一个比较大的概念。在动物的种类中&#xff0c;我们熟悉的有猫(Cat)、狗(Dog)等动物&#xff0c;它们都有动物的一般特征&#xff08;比如能够吃…
阅读更多...
web安全渗透测试十大常规项（一）：web渗透测试之XML和XXE外部实体注入

web安全渗透测试十大常规项（一）：web渗透测试之XML和XXE外部实体注入

#详细点： XML被设计为传输和存储数据，XML文档结构包括XML声明、DTD文档类型定义（可选）、文档元素，其焦点是数据的内容，其把数据从HTML分离，是独立于软件和硬件的信息传输工具。等同于JSON传输。XXE漏洞XML External Entity Injection，即xml外部实体注入漏洞，XXE漏洞发…
阅读更多...
Prometheus告警Alertmanager部署

Prometheus告警Alertmanager部署

Prometheus告警Alertmanager部署 资源监控一般离不开预警&#xff0c;因为我们不可能每时每刻都盯着某个资源监控看&#xff0c;而且在实际的工作中当中我们搭建的解决方案涉及到的服务器是多台甚至数十台&#xff0c;所以更加不现实&#xff0c;因此资源告警是一个必不可少的…
阅读更多...
男士内裤品牌哪个好?2024公认好穿的五款男士内裤分享

男士内裤品牌哪个好?2024公认好穿的五款男士内裤分享

男士内裤作为大家每天都要长时间穿着的贴身衣物&#xff0c;它的重要性不言而喻。为了确保健康与卫生&#xff0c;专家和医生建议您每三个月更换一次内裤&#xff0c;避免细菌滋生&#xff0c;让身体更加清爽自在。而一款优质的内裤&#xff0c;不仅要有舒适的弹性&#xff0c;…
阅读更多...
学生课程信息管理系统

学生课程信息管理系统

摘 要 目前&#xff0c;随着科学经济的不断发展&#xff0c;高校规模不断扩大&#xff0c;所招收的学生人数越来越 多&#xff1b;所开设的课程也越来越多。随之而来的是高校需要管理更多的事务。对于日益增 长的学生相关专业的课程也在不断增多&#xff0c;高校对其管理具有一…
阅读更多...
《无与伦比》Centos7 扩容到已有逻辑卷

《无与伦比》Centos7 扩容到已有逻辑卷

命令可以查找硬盘和分区情况 fdisk -l lsblk
阅读更多...
【会议征稿，CPS出版】第三届先进机械电子与电气工程国际学术会议（ICAMEE 2024，7月19-21）

【会议征稿，CPS出版】第三届先进机械电子与电气工程国际学术会议（ICAMEE 2024，7月19-21）

第三届先进机械电子与电气工程国际学术会议&#xff08;ICAMEE 2024&#xff09;将于2024年7月19-21日在桂林隆重举行。会议主要围绕“机械电子”、“电气工程” 等研究领域展开讨论&#xff0c; 旨在为机械电子、电气工程等领域的专家学者、工程技术人员、技术研发人员提供一个…
阅读更多...
项目文章 | ATAC-seq联合转录组探究牦牛肌肉的调控机制

项目文章 | ATAC-seq联合转录组探究牦牛肌肉的调控机制

还在苦恼没有研究方向&#xff1f;还在找寻开启调控表观调控大门的钥匙&#xff1f;拿到材料不知如何下手&#xff1f;两篇ATAC联合转录组的牦牛调控机制分析或许能给你一点方向。 为了研究不同牦牛品种之间以及牦牛在成熟过程中&#xff0c;骨骼肌的调控如何影响肉类品质&…
阅读更多...
OpenStack快速入门

OpenStack快速入门

任务一 熟悉OpenStack图形界面操作 1.1 Horizon项目 •各OpenStack服务的图形界面都是由Horizon提供的。 •Horizon提供基于Web的模块化用户界面。 •Horizon为云管理员提供一个整体的视图。 •Horizon为终端用户提供一个自主服务的门户。 •Horizon由云管理员进行管理…
阅读更多...
Datacom HCIE实验考试通过率90%！深圳智汇云校传来5月捷报！

Datacom HCIE实验考试通过率90%！深圳智汇云校传来5月捷报！

坚持不懈地努力&#xff0c;才能取得成功的果实 这是不变的真理 深圳云校传来5月捷报 在Datacom HCIE实验考试中 共有10名学员应战 其中9名学员凭借出色的表现 一次性通过了考试 展现出了扎实的技术能力 通过率高达90% &#xff08;华为历年考试平均通过率约60%&#…
阅读更多...
【Hudi】基础概念-数据写

【Hudi】基础概念-数据写

目录 数据写写操作写流程(UPSERT)写流程(Insert)写流程(Insert Overwrite)Key生成策略删除策略 数据写 写操作 UPSERT&#xff1a;默认行为&#xff0c;数据先通过index打标&#xff0c;有一些启发式算法决定消息的组织以及优化文件的大小>CDC导入INSERT:跳过index,写入效…
阅读更多...
Java历史

Java历史

Java程序设计语言史 Java是一种面向对象的编程语言&#xff0c;由Sun Microsystems于1990年初由开发人员James Gosling、Mike Sheridan和Patrick Naughton开发。1991年&#xff0c;詹姆斯戈斯林和他的朋友们组成了一个名为“绿色团队”的团队&#xff0c;进一步致力于这个项…
阅读更多...
如何使用nginx 将新老网站域名重定向？（亲测收藏版）

如何使用nginx 将新老网站域名重定向？（亲测收藏版）

目录 1. 安装Nginx 2. 配置Nginx 3. 启用新配置 结论 最近公司需要推行海外的业务&#xff0c;原来公司的名字麦聪软件的官网maicongs.com暂时用不上了&#xff0c;想启用sqlynx.com&#xff0c;但因为历史流量的原因&#xff0c;有很多的业务是指向的maicongs.com&#xf…
阅读更多...
小程序分页新写法

小程序分页新写法

// pages/query/query.js import {request } from ../../utils/request; Page({/*** 页面的初始数据*/data: {tabClickIndex: ,page: 1,limit: 10,listData: []},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.getList()},/*** 生命周期函数--监听页面初次渲染完成*…
阅读更多...
Sylar C++高性能服务器学习记录23 【Http模块-知识储备篇】

Sylar C++高性能服务器学习记录23 【Http模块-知识储备篇】

早在19年5月就在某站上看到sylar的视频了&#xff0c;一直认为这是一个非常不错的视频。 由于本人一直是自学编程&#xff0c;基础不扎实&#xff0c;也没有任何人的督促&#xff0c;没能坚持下去。 每每想起倍感惋惜&#xff0c;遂提笔再续前缘。 为了能更好的看懂sylar&…
阅读更多...
Python10 python多线程

Python10 python多线程

1.什么是python多线程 Python的多线程指的是在一个Python程序中同时运行多个线程&#xff0c;以达到并发执行多个任务的目的。线程是操作系统能够进行运算调度的最小单位&#xff0c;它被包含在进程之中&#xff0c;是进程中的实际运作单位。 在Python中&#xff0c;多线程的…
阅读更多...
C# OCCT Winform 选中模型改变状态

C# OCCT Winform 选中模型改变状态

选中状态设置 _context new AIS_InteractiveContext(_viewer);var selectionDrawer new Prs3d_Drawer();selectionDrawer.SetColor(Colors.Selection);selectionDrawer.SetDisplayMode(1);selectionDrawer.SetTransparency(0.1f);_context.SetSelectionStyle(selectionDrawe…
阅读更多...
【机器学习】机器学习重要方法——无监督学习：理论、算法与实践

【机器学习】机器学习重要方法——无监督学习：理论、算法与实践

文章目录 引言第一章 无监督学习的基本概念1.1 什么是无监督学习1.2 无监督学习的主要任务 第二章 无监督学习的核心算法2.1 聚类算法2.1.1 K均值聚类2.1.2 层次聚类2.1.3 DBSCAN聚类 2.2 降维算法2.2.1 主成分分析&#xff08;PCA&#xff09;2.2.2 t-SNE 2.3 异常检测算法2.3…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023