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

最后想说

我是一只有趣的兔子,感谢你的喜欢!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Pytorch框架的深度学习Swin-Transformer神经网络食物分类系统源码

第一步&#xff1a;准备数据 5种鸟类数据&#xff1a;self.class_indict ["苹果派", "猪小排", "果仁蜜饼", "生牛肉薄片", "鞑靼牛肉"] &#xff0c;总共有5000张图片&#xff0c;每个文件夹单独放一种数据 第二步&…

分布式锁(4):jedis基于Redis setnx、get、getset的分布式锁

1 实现原理 setnx(lockkey, 当前时间+过期超时时间) ,如果返回1,则获取锁成功;如果返回0则没有获取到锁,转向步骤(2)get(lockkey)获取值oldExpireTime ,并将这个value值与当前的系统时间进行比较,如果小于当前系统时间,则认为这个锁已经超时,可以允许别的请求重新获取,…

《多线程》

每一个任务就是一个进程&#xff0c;每个进程内部至少有一个线程在运行中。线程是程序执行的一个路径&#xff0c;每一个线程都有自己的局部变量表&#xff0c;程序技术器&#xff0c;以及各自的生命周期。 1.创建一个线程&#xff0c;并且重写它的run方法&#xff0c;将行为方…

swift使用swift-protobuf协议通讯,使用指北

什么是Protobuf Protobuf&#xff08;Protocol Buffers&#xff09;协议&#x1f609; Protobuf 是一种由 Google 开发的二进制序列化格式和相关的技术&#xff0c;它用于高效地序列化和反序列化结构化数据&#xff0c;通常用于网络通信、数据存储等场景。 为什么要使用Proto…

UnrealEngine打开Setup.bat,提示Failed to download的解决方法

Failed to download when I run Setup.bat - #3 by Milisours - Getting Started & Setup - Epic Developer Community Forums https://forums.unrealengine.com/uploads/short-url/oGTskBcZI8ACTyCw7jIK2dTmkC7.xml 下载这个文件 然后替换掉Engine/Build/下面的Commit.g…

c++ map set底层模拟实现

关于这两个数据结构的insert接口实现 请看这篇文章 https://blog.csdn.net/l23456789mmmmm/article/details/139500413?spm1001.2014.3001.5501 map::operator[]底层实现请看这篇文章 cmap类operator[]详解_c map operator-CSDN博客 红黑树模拟实现 #pragma once #include &…

Java面试八股之myBatis与myBatis plus的对比

myBatis与myBatis plus的对比 基础与增强&#xff1a; MyBatis 是一个成熟的Java持久层框架&#xff0c;它允许开发者通过XML文件或注解来配置SQL语句和数据库映射&#xff0c;提供了一个灵活的方式来操作数据库&#xff0c;但需要手动编写所有的SQL语句和结果集映射。 MyBa…

Day55 代码随想录打卡|二叉树篇---二叉搜索树中的插入操作

题目&#xff08;leecode T701&#xff09;&#xff1a; 给定二叉搜索树&#xff08;BST&#xff09;的根节点 root 和要插入树中的值 value &#xff0c;将值插入二叉搜索树。 返回插入后二叉搜索树的根节点。 输入数据 保证 &#xff0c;新值和原始二叉搜索树中的任意节点值…

【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【11】ElasticSearch

持续学习&持续更新中… 守破离 【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【11】ElasticSearch 简介基本概念ElasticSearch概念-倒排索引安装基本命令ik 分词器SpringBoot整合测试存储数据&#xff1a;测试复杂检索同步与异步调用 参考 简介 Elasticsearch 是一…

【AIGC】MetaGPT原理以及应用

目录 MetaGPT原理 MetaGPT应用 MetaGPT和传统编程语言相比有什么优势和劣势 视频中的PPT 参考资料 MetaGPT原理 MetaGPT是一种多智能体框架&#xff0c;它结合了元编程技术&#xff0c;通过标准化操作程序&#xff08;SOPs&#xff09;来协调基于大语言模型的多智能体系统…

Zookeeper 集群节点选举原理实现(三)

Zookeeper 集群节点选举原理实现(三) 刚部署三个节点或者多个节点启动时,此时还未选择出领导节点,不同节点的初始化zxid 是如何保证不重复不冲突有序呢? 在 Zookeeper 集群的初始启动阶段,所有节点会在选举领导节点之前先初始化自己的状态和 ZXID。为了确保不同节点的初始…

jieba中文分词器的使用

Jieba 是一个中文分词的第三方库&#xff0c;主要用于对中文文本进行分词。分词是将文本分割成一个个词语的过程&#xff0c;这在中文文本处理中尤为重要&#xff0c;因为中文不像英文那样有明显的空格来分隔词语。Jieba 的分词算法可以实现精确分词、全模式分词和搜索引擎模式…

嵌入式实验---实验一 通用GPIO实验

一、实验目的 1、掌握STM32F103 GPIO程序设计流程&#xff1b; 2、熟悉STM32固件库的基本使用。 二、实验原理 1、通过按键实现&#xff1a;按键按下&#xff0c;LED点亮&#xff1b;按键释放&#xff0c;LED熄灭。 三、实验设备和器材 电脑、Keil uVision5软件、Proteus…

Hierarchical Integration Diffusion Model for Realistic Image Deblurring

neurips23 上交&ETH&字节&清华&上海ai lab&悉尼大学&西湖大学https://github.com/zhengchen1999/HI-Diff 问题引入 现在的diffusion的方法在sample的时候需要的iteration过多&#xff0c;所以本文提出在高度压缩的空间进行DM&#xff0c;且deblur模型…

力扣第209题“长度最小的子数组”

关注微信公众号 数据分析螺丝钉 免费领取价值万元的python/java/商业分析/数据结构与算法学习资料 在本篇文章中&#xff0c;我们将详细解读力扣第209题“长度最小的子数组”。通过学习本篇文章&#xff0c;读者将掌握如何使用滑动窗口和双指针的方法来解决这一问题&#xff0…

甲辰年五月十四风雨思

甲辰年五月十四风雨思 夜雨消暑气&#xff0c;远光归家心。 ​只待万窗明&#xff0c;朝夕千家勤。 ​苦乐言行得&#xff0c;酸甜日常品。 宫商角徵羽&#xff0c;​仁义礼智信。

【python】PyCharm如何设置字体大小和背景

目录 效果展示 字体大小 背景设置 效果展示 字体大小 再左上角找到四条杠的图标 找到File 一般字体大小为22最合适&#xff0c;行间距为默认 背景设置 还是再字体设置的页面搜索 background 小编的其他文章详见&#xff0c;欢迎来支持 东洛的克莱斯韦克-CSDN博客 【机器…

如何优雅的一键下载OpenHarmony活跃分支代码?请关注【itopen: ohos_download】

itopen组织&#xff1a;1、提供OpenHarmony优雅实用的小工具2、手把手适配riscv qemu linux的三方库移植3、未来计划riscv qemu ohos的三方库移植 小程序开发4、一切拥抱开源&#xff0c;拥抱国产化 一、概述 为方便大家每次下载OpenHarmony不同分支/tag代码&#xff0c…

【文末附gpt升级秘笈】“登月游戏”对人类的意义

“登月游戏”对人类的意义是多方面的&#xff0c;不仅体现在科技、教育和娱乐层面&#xff0c;还对人类探索未知的精神产生了深远影响。 一、科技意义 “登月游戏”作为早期计算机游戏的代表之一&#xff0c;展示了计算机技术在模拟现实世界方面的能力。通过模拟登月器的着陆…