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

2024-06-19 13:36
文章标签 代码 html 跳动 frontend 爱心 同款 李峋

本文主要是介绍HTML李峋同款跳动的爱心代码（双爱心版），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

写在前面

跳动的爱心

完整代码

代码分析

系列推荐

最后想说

写在前面

在浩瀚的网络世界中，总有一些小惊喜能触动我们的心弦。今天，就让我们用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李峋同款跳动的爱心代码（双爱心版）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1075171。

相关文章

Python使用Tenacity一行代码实现自动重试详解

Python使用Tenacity一行代码实现自动重试详解

《Python使用Tenacity一行代码实现自动重试详解》tenacity是一个专为Python设计的通用重试库,它的核心理念就是用简单、清晰的方式,为任何可能失败的操作添加重试能力,下面我们就来看... 目录一切始于一个简单的 API 调用Tenacity 入门：一行代码实现优雅重试精细控制：让重试按我
阅读更多...
从入门到精通详解LangChain加载HTML内容的全攻略

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言：当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二
阅读更多...
Python实现MQTT通信的示例代码

Python实现MQTT通信的示例代码

《Python实现MQTT通信的示例代码》本文主要介绍了Python实现MQTT通信的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1. 安装paho-mqtt库‌2. 搭建MQTT代理服务器（Broker）‌‌3. pytho
阅读更多...
MySQL进行数据库审计的详细步骤和示例代码

MySQL进行数据库审计的详细步骤和示例代码

《MySQL进行数据库审计的详细步骤和示例代码》数据库审计通过触发器、内置功能及第三方工具记录和监控数据库活动,确保安全、完整与合规,Java代码实现自动化日志记录,整合分析系统提升监控效率,本文给大... 目录一、数据库审计的基本概念二、使用触发器进行数据库审计1. 创建审计表2. 创建触发器三、Java
阅读更多...
Java中调用数据库存储过程的示例代码

Java中调用数据库存储过程的示例代码

《Java中调用数据库存储过程的示例代码》本文介绍Java通过JDBC调用数据库存储过程的方法,涵盖参数类型、执行步骤及数据库差异,需注意异常处理与资源管理,以优化性能并实现复杂业务逻辑,感兴趣的朋友... 目录一、存储过程概述二、Java调用存储过程的基本javascript步骤三、Java调用存储过程示
阅读更多...
Visual Studio 2022 编译C++20代码的图文步骤

Visual Studio 2022 编译C++20代码的图文步骤

《VisualStudio2022编译C++20代码的图文步骤》在VisualStudio中启用C++20import功能,需设置语言标准为ISOC++20,开启扫描源查找模块依赖及实验性标... 默认创建Visual Studio桌面控制台项目代码包含C++20的import方法。右键项目的属性：
阅读更多...
MySQL数据库的内嵌函数和联合查询实例代码

MySQL数据库的内嵌函数和联合查询实例代码

《MySQL数据库的内嵌函数和联合查询实例代码》联合查询是一种将多个查询结果组合在一起的方法,通常使用UNION、UNIONALL、INTERSECT和EXCEPT关键字,下面：本文主要介绍MyS... 目录一.数据库的内嵌函数1.1聚合函数COUNT([DISTINCT] expr)SUM([DISTIN
阅读更多...
Java实现自定义table宽高的示例代码

Java实现自定义table宽高的示例代码

《Java实现自定义table宽高的示例代码》在桌面应用、管理系统乃至报表工具中,表格（JTable）作为最常用的数据展示组件,不仅承载对数据的增删改查,还需要配合布局与视觉需求,而JavaSwing... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码
阅读更多...
Go语言代码格式化的技巧分享

Go语言代码格式化的技巧分享

《Go语言代码格式化的技巧分享》在Go语言的开发过程中,代码格式化是一个看似细微却至关重要的环节,良好的代码格式化不仅能提升代码的可读性,还能促进团队协作,减少因代码风格差异引发的问题,Go在代码格式... 目录一、Go 语言代码格式化的重要性二、Go 语言代码格式化工具：gofmt 与 go fmt（一）
阅读更多...
前端如何通过nginx访问本地端口

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》：本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载（1）下载地址（2）系统选择（3）版本选择2、安装部署（1）解压（2）配置文件修改（3）启动（4）
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2