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以上等级的日志，那么这些…...
后进先出（LIFO）详解
LIFO 是 Last In, First Out 的缩写，中文译为后进先出。这是一种数据结构的工作原则，类似于一摞盘子或一叠书本： 最后放进去的元素最先出来 -想象往筒状容器里放盘子： （1）你放进的最后一个盘子（…...
SCAU期末笔记 - 数据分析与数据挖掘题库解析
这门怎么题库答案不全啊日 来简单学一下子来 一、选择题（可多选） 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘：专注于发现数据中…...
376. Wiggle Subsequence
376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径：src/utils/timer.ts 完整代码： import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...
2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来，实在找不到，希望有大佬教一下我。 还有就会议时间，我感觉不是图片时间，因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包（Closure）？闭包有什么应用场景和潜在问题？2.解释 JavaScript 的作用域链（Scope Chain） 二、原型与继承3.原型链是什么？如何实现继承&a…...
【开发技术】.Net使用FFmpeg视频特定帧上绘制内容
目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法，当前调用一个医疗行业的AI识别算法后返回…...
永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器
一、原理介绍 传统滑模观测器采用如下结构： 传统SMO中LPF会带来相位延迟和幅值衰减，并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)，可以去除高次谐波，并且不用相位补偿就可以获得一个误差较小的转子位…...
yaml读取写入常见错误 (‘cannot represent an object‘, 117)
错误一：yaml.representer.RepresenterError: (‘cannot represent an object’, 117) 出现这个问题一直没找到原因，后面把yaml.safe_dump直接替换成yaml.dump，确实能保存，但出现乱码： 放弃yaml.dump，又切…...
大数据治理的常见方式
大数据治理的常见方式 大数据治理是确保数据质量、安全性和可用性的系统性方法，以下是几种常见的治理方式： 1. 数据质量管理 核心方法： 数据校验：建立数据校验规则（格式、范围、一致性等）数据清洗&…...