html动态爱心代码【二】(附源码)
目录
前言
效果演示
内容修改
完整代码
总结
前言
七夕马上就要到了，为了帮助大家高效表白，下面再给大家带来了实用的HTML浪漫表白代码(附源码)+背景音乐，可用于520，情人节，生日，表白等场景，可直接使用。
效果演示
内容修改
文案
<div id="child"><h4>💗You And Me💗</h4></div><!--这里写名字❤！！！-->音乐--改成自己本地所存储的mp3地址
<audio autoplay="autoplay" loop="loop" preload="auto" id="music" controls><source src="img/魏潇逸,小坠%20-%20寄东风.mp3" type="audio/ogg"><source src="img/魏潇逸,小坠%20-%20寄东风.mp3" type="audio/mpeg">
</audio>完整代码
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>甜甜蜜蜜</title><style>canvas {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, .2);}#child {position: fixed;top: 52%;left: 50%;margin-top: -75px;margin-left: -100px;z-index: 100;}h4 {font-family: "STKaiti";font-size: 40px;color: #f584b7;position: relative;top: -70px;left: -65px;}</style>
</head>
<body>
<div id="child"><h4>💗You And Me💗</h4></div><!--这里写名字❤！！！-->
<canvas id="heart" width="1920" height="947"></canvas>
<script>window.requestAnimationFrame =window.__requestAnimationFrame ||window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||(function () {return function (callback, element) {var lastTime = element.__lastTime;if (lastTime === undefined) {lastTime = 0;}var currTime = Date.now();var timeToCall = Math.max(1, 33 - (currTime - lastTime));window.setTimeout(callback, timeToCall);element.__lastTime = currTime + timeToCall;};})();window.isDevice = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(((navigator.userAgent || navigator.vendor || window.opera)).toLowerCase()));var loaded = false;var init = function () {if (loaded) return;loaded = true;var mobile = window.isDevice;var koef = mobile ? 0.5 : 1;var canvas = document.getElementById('heart');var ctx = canvas.getContext('2d');var width = canvas.width = koef * innerWidth;var height = canvas.height = koef * innerHeight;var rand = Math.random;ctx.fillStyle = "rgba(0,0,0,1)";ctx.fillRect(0, 0, width, height);var heartPosition = function (rad) {//return [Math.sin(rad), Math.cos(rad)];return [Math.pow(Math.sin(rad), 3), -(15 * Math.cos(rad) - 5 * Math.cos(2 * rad) - 2 * Math.cos(3 * rad) - Math.cos(4 * rad))];};var scaleAndTranslate = function (pos, sx, sy, dx, dy) {return [dx + pos[0] * sx, dy + pos[1] * sy];};window.addEventListener('resize', function () {width = canvas.width = koef * innerWidth;height = canvas.height = koef * innerHeight;ctx.fillStyle = "rgba(0,0,0,1)";ctx.fillRect(0, 0, width, height);});var traceCount = mobile ? 20 : 50;var pointsOrigin = [];var i;var dr = mobile ? 0.3 : 0.1;for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 210, 13, 0, 0));for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 150, 9, 0, 0));for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 90, 5, 0, 0));var heartPointsCount = pointsOrigin.length;var targetPoints = [];var pulse = function (kx, ky) {for (i = 0; i < pointsOrigin.length; i++) {targetPoints[i] = [];targetPoints[i][0] = kx * pointsOrigin[i][0] + width / 2;targetPoints[i][1] = ky * pointsOrigin[i][1] + height / 2;}};var e = [];for (i = 0; i < heartPointsCount; i++) {var x = rand() * width;var y = rand() * height;e[i] = {vx: 0,vy: 0,R: 2,speed: rand() + 5,q: ~~(rand() * heartPointsCount),D: 2 * (i % 2) - 1,force: 0.2 * rand() + 0.7,f: "hsla(0," + ~~(40 * rand() + 60) + "%," + ~~(60 * rand() + 20) + "%,.3)",trace: []};for (var k = 0; k < traceCount; k++) e[i].trace[k] = {x: x, y: y};}var config = {traceK: 0.4,timeDelta: 0.01};var time = 0;var loop = function () {var n = -Math.cos(time);pulse((1 + n) * .5, (1 + n) * .5);time += ((Math.sin(time)) < 0 ? 9 : (n > 0.8) ? .2 : 1) * config.timeDelta;ctx.fillStyle = "rgba(0,0,0,.1)";ctx.fillRect(0, 0, width, height);for (i = e.length; i--;) {var u = e[i];var q = targetPoints[u.q];var dx = u.trace[0].x - q[0];var dy = u.trace[0].y - q[1];var length = Math.sqrt(dx * dx + dy * dy);if (10 > length) {if (0.95 < rand()) {u.q = ~~(rand() * heartPointsCount);} else {if (0.99 < rand()) {u.D *= -1;}u.q += u.D;u.q %= heartPointsCount;if (0 > u.q) {u.q += heartPointsCount;}}}u.vx += -dx / length * u.speed;u.vy += -dy / length * u.speed;u.trace[0].x += u.vx;u.trace[0].y += u.vy;u.vx *= u.force;u.vy *= u.force;for (k = 0; k < u.trace.length - 1;) {var T = u.trace[k];var N = u.trace[++k];N.x -= config.traceK * (N.x - T.x);N.y -= config.traceK * (N.y - T.y);}ctx.fillStyle = u.f;for (k = 0; k < u.trace.length; k++) {ctx.fillRect(u.trace[k].x, u.trace[k].y, 1, 1);}}ctx.fillStyle = "rgba(255,255,255,1)";for (i = u.trace.length + 13; i--;) ctx.fillRect(targetPoints[i][0], targetPoints[i][1], 2, 2);window.requestAnimationFrame(loop, canvas);};loop();};var s = document.readyState;if (s === 'complete' || s === 'loaded' || s === 'interactive') init();else document.addEventListener('DOMContentLoaded', init, false);
</script>
<audio autoplay="autoplay" loop="loop" preload="auto" id="music" controls><source src="img/魏潇逸,小坠%20-%20寄东风.mp3" type="audio/ogg"><source src="img/魏潇逸,小坠%20-%20寄东风.mp3" type="audio/mpeg">
</audio>
</body>
</html>
总结
大家有想法的还可以去修改它的线条颜色，外形等等，代码直接copy就能用，当然歌曲路径根据自己的修改就行，本章到这就结束啦！！
相关文章：
html动态爱心代码【二】(附源码)
目录 前言 效果演示 内容修改 完整代码 总结 前言 七夕马上就要到了，为了帮助大家高效表白，下面再给大家带来了实用的HTML浪漫表白代码(附源码)背景音乐，可用于520，情人节，生日，表白等场景，…...
【Rust】Rust学习 第十六章无畏并发
安全且高效的处理并发编程是 Rust 的另一个主要目标。并发编程（Concurrent programming），代表程序的不同部分相互独立的执行，而 并行编程（parallel programming）代表程序不同部分于同时执行，这两…...
系统报错mfc100u.dll丢失的解决方法（完美解决dll问题）
系统文件mfc100u.dll丢失和出错，极有可能是盗号木马、流氓软件等恶意程序所导致，其感染相关文件并加载起来，一旦杀毒软件删除被感染的文件，就会导致相关组件缺失，游戏等常用软件运行不起来，且提示“无法启动…...
docker compose的用法
目录 一、Docker-Compose介绍 1.1 Docker-Compose的概述 1.2 Docker-Compose 用来实现Docker容器快速编排 1.3 Docker-compose模板文件简介 二、YAML简介 2.1 YAML的概述 2.2 YAML的基本语法规则 2.3 YAML支持的数据架构 三、配置内部常用字段 四、Docker-compose 常…...
Linux: 使用 ssh 连接其他服务器
通过ifconfig 查看要连接的服务器地址： ubuntuubuntu1804-0172:/media/sangfor/vdc$ ssh ubuntu192.168.11.49 输入要连接的服务器密码: ubuntua192.168.1149 s password: 连接服务器成功：...
[.NET/WPF] CommunityToolkit.Mvvm 异步指令
我们在开发中, 经常会有这样的需求: 点击按钮后, 进行一些耗时的工作工作进行时, 按钮不可再次被点击工作进行时, 会显示进度条, 或者 “加载中” 的动画 RelayCommand CommunityToolkit.Mvvm 中的 RelayCommand 除了支持最简单的同步方法, 还支持以 Task 作为返回值的异步方…...
热烈祝贺汇隆成功入选航天系统采购供应商库
经过航天系统采购平台的严审，浙江汇隆晶片技术有限公司成功入选中国航天系统采购供应商库。航天系统采购平台是航天系统内企业采购专用平台，服务航天全球范围千亿采购需求，目前，已有华为、三一重工、格力电器、科大讯飞等企业、机…...
2019年3月全国计算机等级考试真题（C语言二级）
2019年3月全国计算机等级考试真题（C语言二级） 第1题 负责数据库中查询操作的数据库语言是 A. 数据定义语言 B. 数据管理语言 C. 数据操纵语言 D. 数据控制语言 正确答案：C 第2题 有关系如下图所示，其违反了哪一类完整性约束 …...
MySQL 游标
文章目录 1.游标是什么2.MySQL 游标3.定义游标4.打开游标5.提取数据6.关闭游标参考文献 1.游标是什么 游标（Cursor）是一种用于处理查询结果集的数据库对象，它允许开发者按照特定的顺序逐行遍历查询结果集中的数据。游标通常用于在数据库中执…...
ElasticSearch 7.4学习记录（DSL语法）
上文和大家一起初次了解了很多ES相关的基础知识，本文的内容将会是实际企业中所需要的吗，也是我们需要熟练应用的内容。 面对ES，我们最多使用的就是查询，当我负责这个业务时，现不需要我去考虑如何创建索引，添…...
全志orangepi-zero2驱动编写2，控制电平高低
使用驱动编写控制高低电平 可看我前俩篇文章： 【1】全志orangepi-zeor2驱动编写 【2】驱动函数框架详解 检索芯片手册关键信息 知道GPIO基地址 知道PC偏移地址 知道想要控制的端口的信息 知道数据位如何操作 代码实操 驱动代码 #include <linux/fs.h&…...
软考高级系统架构设计师系列之：论文典型试题写作要点和写作素材总结系列文章四
软考高级系统架构设计师系列之：论文典型试题写作要点和写作素材总结系列文章四 一、论软件的静态演化和动态演化及其应用1.论文题目2.写作要点和写作素材二、论大规模分布式系统缓存设计策略1.论文题目2.写作要点和写作素材三、论基于REST服务的Web应用系统设计1.论文题目2.写…...
06.利用Redis实现点赞功能
学习目标： 提示：学习如何利用Redisson实现点赞功能 学习产出： 解决方案： 点赞后的用户记录在Redis的set数据类型中 1. 准备pom环境 <dependency><groupId>org.springframework.boot</groupId><artifactI…...
【React】生命周期和钩子函数
概念 组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程。 只有类组件才有生命周期。 分为三个阶段： 挂载阶段更新阶段销毁阶段 三个阶段 挂载阶段 钩子函数 - constructor 创建阶段触发 作用：创建数据 之前定义状态是简写&…...
无涯教程-TensorFlow - 优化器
Optimizers是扩展类，其中包括用于训练特定模型的附加信息，Optimizers类使用给定的参数初始化，用于提高速度和性能，以训练特定模型。 TensorFlow的基本Optimizers是- tf.train.Optimizer 此类在tensorflow/python/training/opti…...
基于AQS+双向链表实现队列先进先出
学习AQS写的一个模拟案例 package com.tom.xiangyun.ch04_aqs;import com.tom.tuling.UnsafeFactory; import sun.misc.Unsafe;import java.util.concurrent.atomic.AtomicInteger; import java.util.concurrent.locks.ReentrantLock;/*** 使用双向链表实现队列** author 钟棋…...
无涯教程-Perl - time函数
描述 此函数返回自纪元以来的秒数(对于大多数系统,是1970年1月1日UTC,00:00:00；对于Mac OS,是1904年1月1日,00:00:00)。适用于gmtime和本地时间。 语法 以下是此函数的简单语法- time返回值 此函数返回自纪元后数秒的整数。 例 以下是显示其基本用法的示例代…...
CUDA Bug＜三＞当__global__函数出现里面所有输出的数组都随机赋值了
问题具体描述： eg. __global__ void Updata_HomJm(float* H,float *HJm,float* fr,float *gr,float* ur,float* urgrJm,float*wpd,float *w, float *wJm,int n) { int idx blockIdx.x*blockDim.x threadIdx.x;float t 0.0;//H*zpint idx_Ai idx*n;for (int j…...
甜椒叶病害识别（Python代码，pyTorch框架，深度卷积网络模型，很容易替换为其它模型，带有GUI识别界面）
代码运行要求：Torch>1.13.1即可 1.数据集介绍： 第一个文件夹是细菌斑叶（3460张） 第二个文件夹是 健康（4024张） 2.整个文件夹 data文件夹存放的是未被划分训练集和测试集的原始照片 picture文件夹存放的…...
Python爬虫——scrapy_日志信息以及日志级别
日志级别（由高到低） CRITICAL： 严重错误 ERROR： 一般错误 WARNING： 警告 INFO： 一般警告 DEBUG： 调试信息 默认的日志等级是DEBUG 只要出现了DEBUG或者DEBUG以上等级的日志，那么这些…...
微信小程序 echarts 画多个横向柱状图
然后是json {"usingComponents": {"ec-canvas": "../../common/ec-canvas/ec-canvas"},"navigationBarTitleText": "主题活动" } ec-canvas获取方式 在链接里下载代码 然后copy ec-canvas文件夹到自己的项目 https://gi…...
【二叉树】572. 另一棵树的子树
572. 另一棵树的子树 解题思路 遍历二叉树的思路针对每一个节点判断该节点的子树和subtree是不是相等需要编写判断两个子树是否相等的函数 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* …...
220V转5V芯片三脚芯片-AH8652
220V转5V芯片三脚芯片是一种非常常见的电源管理芯片，它通常被用于将高压交流输入转为稳定的直流5V输出。芯片型号AH8652是一款支持交流40V-265V输入范围的芯片，采用了SOT23-3三脚封装。该芯片内部集成了650V高压MOS管，能够稳定地将输入电压转…...
windows系统丢失mfc120u.dll的解决方法
1.mfc120u.dll是什么 mfc120u.dll是Windows操作系统中的一个动态链接库（Dynamic Link Library，简称DLL）文件。它包含了一些用于运行C程序的函数和其他资源。这个特定的DLL文件是Microsoft Foundation Classes（MFC）库的…...
css 实现电梯导航
实现原理：利用css实现电梯导航很简单，基本原理就是通过a标签绑定跳转目标的id来实现的 html代码： <div class"body"><div class"top" id"top"></div><div class"con1" id"…...
【Spring Boot】Spring Retry减少1000 行代码讲解
文章目录 前言问题介绍解决方案Let’s start hacking!1. 设置 Spring 重试2. 重构代码 总结 前言 本文翻译自国外论坛 medium，原文地址：levelup.gitconnected.com/how-i-delet…，原文作者：Hari Ohm Prasath 使用 Spring Retry 重…...
【数据结构OJ题】相交链表
原题链接：https://leetcode.cn/problems/intersection-of-two-linked-lists/description/ 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 看到这道题，很容易想到的方法就是暴力求解，就是将一个链表的每个结点的地址…...
【华为OD机试】最小传输时延I【2023 B卷|200分】
【华为OD机试】-真题 !!点这里！！ 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 某通信网络中有N个网络结点，用1到N进行标识。网络通过一个有向无环图表示， 其中图的边的值表示结点之间的消息传递时延。 现给定相连节点之间的时延列表times[i]={u，v，w}，其中u表示…...
Android13 网络 Adb 默认开启
Android 13 网络 Adb 默认开启 文章目录 Android 13 网络 Adb 默认开启一、前言二、默认adb 代码实现1、修改的目录：2、具体修改：（1）在XXX_device.mk 添加属性（2）设置固定端口号（3）去…...
Git分享-规范/建议/技巧
1. Git多人协作开发流程图 1.1 processOn默认的模板 1.2 改造之后 https://www.processon.com/view/link/64ccaf56a433c931b2f9428a 访问密码：512I ① 总流程图 ② feat分支（功能/需求 分支）流程 ③ bugfix分支（紧急补丁分支&…...
vue3文件下载功能
定义方法： utils.js /**** param url 目标下载接口* param query 查询参数* param fileName 文件名称* returns {*}*/ export function downBlobFile(url: any, query: any, fileName: string) {return request({//url: url,method: get,responseType: blob,param…...
Python调用文心一言的API
最近申请了文心一言的key，然后尝试调用了一下文心一言，这里使用一个简单的方式来调用文心一言： pip install paddle-pipelinesfrom pipelines.nodes import ErnieBotapi_key "your apply key" secret_key "your apply secr…...
【计算机网络八股】计算机网络（一）
目录 计算机网络的各层协议及作用？TCP和UDP的区别？UDP 和 TCP 对应的应用场景是什么？详细介绍一下 TCP 的三次握手机制？为什么需要三次握手，而不是两次？为什么要三次握手，而不是四次？…...
记录一次arcgis engine开发版本引入问题
之前基于arcigs 10.1vs2013开发的程序，现在拿出来要改，但是目前版本是arcgis10.7vs2017/vs2019,打开后无论如何替换引用版本，都报错 （具体版本对应可以看这：ArcGIS Engine 与 Visual Studio 版本对照表_vs2019对应啥版…...
2023年Java毕业设计怎样选题，有哪些注意事项，300道Java毕业设计题目
文章目录 一、确定个人兴趣和技能二、考虑实际应用价值三、注重创新和独特性四、合理规划时间和资源五、注重实践和测试Java 毕业设计题目参考第一部分第二部分 小结 随着计算机技术的不断发展，Java编程语言已经成为了众多大学计算机专业学生必修的一门课程。而Java…...
算法-滑动窗口-串联所有单词的子串
算法-滑动窗口-串联所有单词的子串 1 题目概述 1.1 题目出处 https://leetcode.cn/problems/substring-with-concatenation-of-all-words/ 1.2 题目描述 2 滑动窗口Hash表 2.1 解题思路 构建一个大小为串联子串的总长的滑动窗口为每个words中的子串创建一个hash表, <子…...
2023年7月京东美妆护肤品小样行业数据分析（京东数据挖掘）
如今，消费者更加谨慎，消费决策也更加理性。在这一消费环境下，美妆护肤市场中，面对动辄几百上千的化妆品，小样或体验装无疑能够降低消费者的试错成本。由此，这门生意也一直备受关注。 并且，小样…...
记录Taro巨坑，找不到sass类型定义文件
问题 taronutuisassts项目里tsconfig.json一直报红报错。 找不到“sass”的类型定义文件。 程序包含该文件是因为: 隐式类型库 “sass” 的入口点 其实正常人想的肯定是装上 types/sass试试。开始我试过了，没用。删了依赖重装也没用。后面在issue中找到答案了 解决…...
CS1988|C#无法在异步方法中使用ref,in,out类型的参数的问题
CS1988|C#无法在异步方法中使用ref,in,out类型的参数 🌀|场景： BlazorServer的场景中推荐使用异步方法，使用ref,out,in为参数前缀则报错CS1988 原因如下: ref parameters are not supported in async methods because the method may not h…...
ubuntu开机失败——ACPI Error
开机循环进入GNU GRUB 或者 黑屏 1.acpioff 解决办法 1）先用下面方法进入系统 2）更改grub ref 开机循环进入GNU GRUB 或者 黑屏 有提示ACPI Error错误如图： 解决办法 1）先用下面方法进入系统 在GUN GRUB界面，选择ubun…...
搭建开发环境-操作系统篇（一键搭建开发环境）
概述 所谓工欲善其事必先利其器，搭环境往往是开发过程中卡出很多初学者的拦路虎。 对于很多老鸟来说，很多东西都已经习惯成自然，也就没有刻意和初学者说。但对于很多初学者，却是受益良多。 这个系列，先从操作系统开始…...
人工智能AI绘画接入使用文档
人工智能AI绘画接入使用 一、人工智能AI绘画二、使用步骤1、接口2、请求参数3、请求参数示例4、接口 返回示例 三、 AI绘画优秀描述例子四、 如何获取appKey和uid1、申请appKey:2、获取appKey和uid 五、重要说明六、AI绘画成果展示 一、人工智能AI绘画 AI作画,用户可以在平台上…...
如何使用PyQt进行文件操作
PyQt是一个非常强大的Python GUI库，它可以帮助我们创建漂亮的跨平台应用程序。不过，在你开始使用PyQt进行文件操作之前，我想提醒你，这并不是在操作文件系统，而是在操作文件和文件夹。 首先，我们要导入PyQt…...
阿里云CDN加速器基本概念与购买开通
文章目录 1.CDN加速器的基本概念1.1.CDN加速器基本介绍1.2.网站引入CDN加速器的架构图1.3.CDN加速器的工作原理1.4.引入CDN后域名解析变成了CNAME？ 2.开通阿里云CDN加速服务 1.CDN加速器的基本概念 CDN加速器官方文档：https://help.aliyun.com/product/…...
2023河南萌新联赛第（六）场：河南理工大学-F 爱睡大觉的小C
2023河南萌新联赛第（六）场：河南理工大学-F 爱睡大觉的小C https://ac.nowcoder.com/acm/contest/63602/F 文章目录 2023河南萌新联赛第（六）场：河南理工大学-F 爱睡大觉的小C题意解题思路 题意 新学期的概…...
[C++ 网络协议编程] 域名及网络地址
1. DNS服务器 DNS（Domain Name System）：是对IP地址和域名（如:www.baidu.com等）进行相互转换的系统，其核心是DNS服务器。 我们输入的www.baidu.com是域名，是一种虚拟地址，而非实际地…...
Java【HTTP】什么是 Cookie 和 Session? 如何理解这两种机制的区别和作用?
文章目录 前言一、Cookie1, 什么是 Cookie2, Cookie 从哪里来3, Cookie 到哪里去4, Cookie 有什么用 二、Session1, 什么是 Session2, 理解 Session 三、Cookie 和 Session 的区别总结 前言 各位读者好, 我是小陈, 这是我的个人主页, 希望我的专栏能够帮助到你: 📕 …...
使用U盘重装Windows10系统详细步骤及配图【官方纯净版】
文章目录 1.制作启动盘1.1准备U盘及一台电脑1.2下载win10安装包 2.安装操作系统2.1插入系统安装盘2.2设置启动盘为第一启动项2.3开始安装操作系统 3.安装成功后进入图形界面3.1启动问题3.2驱动问题3.3调出"控制面板"3.4给磁盘分区 4.win10激活 前天下午不知道怎么想的…...
数据结构之——（手撕）顺序表
本章会介绍的知识点如下图： 1： 顺序表的概念：顺序表是用一段物理地址连续的存储单元依次存储数据的线性结构，通常我们使用数组来表示，对数组进行增删查改。 顺序表的结构：逻辑结构与物理结构都是内存中一块…...
冠达管理：非银金融是什么？
非银金融（Non-banking Financial Institutions，简称非银）是指除了传统的银行以外的其他金融机构。与银行不同的是，非银金融机构没有颁发钱银的权利，但在金融市场中发挥着重要的效果。在全球范围内，非银金融…...