当前位置： 首页 > news >正文

HTML满屏漂浮爱心

news 2025/12/29 10:46:35

目录

写在前面

满屏爱心

代码分析

系列推荐

写在最后

写在前面

小编给大家准备了满屏漂浮爱心代码，一起来看看吧~

满屏爱心

文件heart.svg

<svg xmlns="http://www.w3.org/2000/svg" width="473.8px" height="408.6px" viewBox="0 0 473.8 408.6"><path fill="#d32932" d="M404.6,16.6C385.4,6.1,363.5,0,340,0c-41.5,0-78.5,18.9-103,48.5C212.3,18.9,175.3,0,133.8,0 c-23.3,0-45.3,6.1-64.5,16.6C27.9,39.5,0,83.4,0,133.9c0,14.4,2.4,28.3,6.6,41.2C29.6,278.4,237,408.6,237,408.6 s207.2-130.2,230.2-233.5c4.3-12.9,6.6-26.8,6.6-41.2C473.8,83.4,445.9,39.6,404.6,16.6z"/></svg>

文件满屏漂浮爱心.html 

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Love</title><style>* {margin: 0;padding: 0;}body {background-color: #1E1E1E;}</style>
</head><body><canvas id="drawHeart"></canvas><script>var hearts = [];var canvas = document.getElementById('drawHeart');var wW = window.innerWidth;var wH = window.innerHeight;// 创建画布var ctx = canvas.getContext('2d');// 创建图片对象var heartImage = new Image();heartImage.src = 'heart.svg';var num = 100;init();window.addEventListener('resize', function () {wW = window.innerWidth;wH = window.innerHeight;});// 初始化画布大小function init() {canvas.width = wW;canvas.height = wH;for (var i = 0; i < num; i++) {hearts.push(new Heart(i % 5));}requestAnimationFrame(render);}function getColor() {var val = Math.random() * 10;if (val > 0 && val <= 1) {return '#00f';} else if (val > 1 && val <= 2) {return '#f00';} else if (val > 2 && val <= 3) {return '#0f0';} else if (val > 3 && val <= 4) {return '#368';} else if (val > 4 && val <= 5) {return '#666';} else if (val > 5 && val <= 6) {return '#333';} else if (val > 6 && val <= 7) {return '#f50';} else if (val > 7 && val <= 8) {return '#e96d5b';} else if (val > 8 && val <= 9) {return '#5be9e9';} else {return '#d41d50';}}function getText() {var val = Math.random() * 10;if (val > 1 && val <= 3) {return 'Love';} else if (val > 3 && val <= 5) {return 'You';} else if (val > 5 && val <= 8) {return 'I';} else {return 'I Love You';}}function Heart(type) {this.type = type;// 初始化生成范围this.x = Math.random() * wW;this.y = Math.random() * wH;this.opacity = Math.random() * .5 + .5;// 偏移量this.vel = {x: (Math.random() - .5) * 5,y: (Math.random() - .5) * 5}this.initialW = wW * .5;this.initialH = wH * .5;// 缩放比例this.targetScale = Math.random() * .15 + .02; // 最小0.02this.scale = Math.random() * this.targetScale;// 文字位置this.fx = Math.random() * wW;this.fy = Math.random() * wH;this.fs = Math.random() * 10;this.text = getText();this.fvel = {x: (Math.random() - .5) * 5,y: (Math.random() - .5) * 5,f: (Math.random() - .5) * 2}}Heart.prototype.draw = function () {ctx.save();ctx.globalAlpha = this.opacity;ctx.drawImage(heartImage, this.x, this.y, this.width, this.height);ctx.scale(this.scale + 1, this.scale + 1);if (!this.type) {// 设置文字属性ctx.fillStyle = getColor();ctx.font = 'italic ' + this.fs + 'px sans-serif';// 填充字符串ctx.fillText(this.text, this.fx, this.fy);}ctx.restore();}Heart.prototype.update = function () {this.x += this.vel.x;this.y += this.vel.y;if (this.x - this.width > wW || this.x + this.width < 0) {// 重新初始化位置this.scale = 0;this.x = Math.random() * wW;this.y = Math.random() * wH;}if (this.y - this.height > wH || this.y + this.height < 0) {// 重新初始化位置this.scale = 0;this.x = Math.random() * wW;this.y = Math.random() * wH;}// 放大this.scale += (this.targetScale - this.scale) * .1;this.height = this.scale * this.initialH;this.width = this.height * 1.4;// -----文字-----this.fx += this.fvel.x;this.fy += this.fvel.y;this.fs += this.fvel.f;if (this.fs > 50) {this.fs = 2;}if (this.fx - this.fs > wW || this.fx + this.fs < 0) {// 重新初始化位置this.fx = Math.random() * wW;this.fy = Math.random() * wH;}if (this.fy - this.fs > wH || this.fy + this.fs < 0) {// 重新初始化位置this.fx = Math.random() * wW;this.fy = Math.random() * wH;}}function render() {ctx.clearRect(0, 0, wW, wH);for (var i = 0; i < hearts.length; i++) {hearts[i].draw();hearts[i].update();}requestAnimationFrame(render);}</script>
</body></html>

代码分析

这个HTML、CSS和JavaScript代码描述了一个网页，该网页会在加载后在全屏黑色背景上动态生成并显示多个彩色心形图案以及随机出现的文本。以下是程序的主要逻辑分析：

1. HTML结构：

   - 页面中包含一个`<canvas>`元素，id为'drawHeart'，用于绘制动画效果。

2. CSS样式：

   - CSS部分仅设置了全局的边距为零，并将body的背景颜色设为深灰色(#1E1E1E)。

3. JavaScript脚本：

   - 定义了全局变量：`hearts`数组用来存储所有心形对象；获取画布元素`canvas`及其上下文`ctx`；声明窗口宽度`wW`和高度`wH`；设置心形图片源（假设是SVG格式的心形图像）；并定义要创建的心形数量`num`。

   - `init()`函数负责初始化画布大小以适应浏览器窗口尺寸，并创建指定数量的心形对象，每个都关联到一个`Heart`类的实例。

   - `getColor()`函数根据随机数返回不同颜色值，使得心形及文本有多种颜色可能。

   - `getText()`函数随机选择返回字符串"Love"、"You"、"I"或"I Love You"，作为可能出现的文本内容。

   - 定义了`Heart`构造函数，用于创建心形对象，包含位置、透明度、速度、缩放比例等属性，以及文字的相关属性（如位置、大小和内容）。

   - `Heart.prototype.draw()`方法负责绘制心形和可能的文字内容。它首先保存当前绘图状态，然后设置透明度，绘制心形图片，并根据需要进行缩放和平移操作来显示文字。

   - `Heart.prototype.update()`方法更新每个心形的位置、缩放和其他属性，确保它们在屏幕范围内运动，超出范围时重新初始化位置。

   - `render()`函数是主渲染循环，清空画布内容，遍历所有心形对象，调用它们的`draw()`和`update()`方法，最后使用`requestAnimationFrame`调度下一次渲染，从而实现动画效果。

总之，这段代码实现了一个动态且随机生成心形与文字动画的网页应用，在页面加载后会在屏幕上呈现不断变化的心形图案和飘动的爱意短语。

系列推荐

序号目录直达链接
1HTML实现3D相册HTML实现3D相册-CSDN博客
2HTML元素周期表HTML元素周期表-CSDN博客
3HTML黑客帝国字母雨HTML黑客帝国字母雨-CSDN博客
4HTML五彩缤纷的爱心HTML五彩缤纷的爱心-CSDN博客
5HTML飘落的花瓣HTML飘落的花瓣-CSDN博客
6HTML哆啦A梦HTML哆啦A梦-CSDN博客
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

写在最后

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

相关文章：

HTML满屏漂浮爱心

目录 写在前面 满屏爱心 代码分析 系列推荐 写在最后 写在前面 小编给大家准备了满屏漂浮爱心代码&#xff0c;一起来看看吧~ 满屏爱心 文件heart.svg <svg xmlns"http://www.w3.org/2000/svg" width"473.8px" height"408.6px" view…...

编程日记 2024/5/14 18:29:58

爬虫应该选择住宅ip代理还是数据中心代理？

住宅代理 住宅代理是互联网服务提供商 (ISP) 提供的 IP 地址&#xff0c;它们是附加到实际物理位置的真实IP地址。住宅代理允许用户通过目标区域内的真实IP地址连接到互联网。 数据中心代理 数据中心代理是指是使用数据中心拥有并管理IP的代理&#xff0c;IP地址来源于数据中…...

编程日记 2024/5/14 18:27:56

百面算法工程师目录 | 深度学习目标检测、语义分割、分类上百种面试问答技巧

本文给大家带来的百面算法工程师是深度学习面试目录大纲&#xff0c;文章内总结了常见的提问问题&#xff0c;旨在为广大学子模拟出更贴合实际的面试问答场景。在这篇文章中&#xff0c;可以点击题目直达问题答案处&#xff0c;方便查找问题寻找答案。节约大家的时间。通过对这…...

编程日记 2024/5/14 18:26:54

Java中Maven的依赖管理

依赖介绍 是指当前项目运行所需要的jar包&#xff0c;一个项目中可以引入多个依赖 配置 在pom.xml中编写<dependencies>标签 在<dependencies>中使用<dependency>引入标签 定义坐标的groupId、rtifactId、version 点击刷新按钮、引入新坐标 例如引入下…...

编程日记 2024/5/14 18:25:53

Github新手入门使用方法

**存在问题&#xff1a;**新手如何快速入门github&#xff0c;能够下载开源文件&#xff0c;并且修改后更新远程github仓库&#xff1b; 解决方案&#xff1a; 参考&#xff1a; http://www.360doc.com/content/24/0301/12/60419_1115656653.shtml https://blog.csdn.net/gongd…...

编程日记 2024/5/14 18:21:48

期权隐含波动率到底是什么意思？

今天期权懂带你了解期权隐含波动率到底是什么意思&#xff1f;期权隐含波动率解析。通俗的说&#xff0c;期权隐含波动率是在期权市场中买家和卖家对于&#xff0c;某一期权合约价格变动幅度大小的判断。 期权隐含波动率到底是什么意思&#xff1f; 隐含波动率是根据期权市场价…...

编程日记 2024/5/14 18:19:47

28、Flink 为管理状态自定义序列化

为管理状态自定义序列化 a&#xff09;概述 对状态使用自定义序列化&#xff0c;包含如何提供自定义状态序列化程序、实现允许状态模式演变的序列化程序。 b&#xff09;使用自定义状态序列化程序 注册托管 operator 或 keyed 状态时&#xff0c;需要 StateDescriptor 来指…...

编程日记 2024/5/14 18:18:46

【强训笔记】day17

NO.1 思路&#xff1a;用一个字符串实现&#xff0c;stoi函数可以转化为数字并且去除前导0。 代码实现&#xff1a; #include <iostream> #include<string> using namespace std;string s;int main() {cin>>s;for(int i0;i<s.size();i){if(s[i]%20) s[…...

编程日记 2024/5/14 18:17:44

平滑 3d 坐标

3d平滑 import torch import torch.nn.functional as F import numpy as np import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3Dclass SmoothOperator:def smooth(self, vertices):# 使用一维平均池化进行平滑vertices_smooth F.avg_pool1d(vertices.p…...

编程日记 2024/5/14 18:15:42

Go解析的数据类型可能含有不同数据结构的处理方式

最近做一个需求&#xff0c;各种业务消息都会往我的消息队列中写各种类型的数据&#xff0c;服务端需要接受各种不同的参数然后转换为本地数据结构&#xff0c;Go语言不确定上游传过来的数值是什么类型&#xff0c;然后又下面四种解决方案。 1. 类型断言和类型切换 func (Mis…...

编程日记 2024/5/14 18:12:38

Java网络编程基础

Java网络编程基础主要涉及进程间通信、网络通信协议、IP地址和端口以及Java提供的网络应用编程接口等核心概念。 进程间通信是Java网络编程的基础。进程是运行中的程序&#xff0c;而进程间通信则是指不同进程之间进行数据交换和共享信息的过程。在Java中&#xff0c;进程间的…...

编程日记 2024/5/14 18:11:37

鸿蒙DevEco Studio 4.1 Release-模拟器启动方式错误

软件版本&#xff1a;DevEco Studio 4.1 Release 报错提示&#xff1a; 没有权限查看处理指导 Size on Disk 显示1.0MB 尝试方案&#xff08;统统无效&#xff09;&#xff1a; 1、“windows虚拟机监控程序平台”、"虚拟机平台"已开启 启用CPU虚拟化 2、C…...

编程日记 2024/5/14 18:09:34

Linux与windows网络管理

文章目录 一、TCP/IP1.1、TCP/IP概念TCP/IP是什么TCP/IP的作用TCP/IP的特点TCP/IP的工作原理 1.2、TCP/IP网络发展史1.3、OSI网络模型1.4、TCP/IP网络模型1.5、linux中配置网络网络配置文件位置DNS配置文件主机名配置文件常用网络查看命令 1.6、windows中配置网络CMD中网络常用…...

编程日记 2024/5/14 18:08:33

一站式、低成本 | 等保一体机安全解决方案

方案建设背景 等级保护是我国关于信息安全的基本政策&#xff0c;相关政策制度要求单位开展等级保护工作。单位信息系统存在的安全隐患和不足&#xff0c;进行安全整改之后&#xff0c;提高信息系统的信息安全防护能力&#xff0c;降低系统被攻击的风险&#xff0c;维护单位良…...

编程日记 2024/5/14 18:07:32

Grafana(CVE-2021-43798)、Apache Druid 代码执行漏洞

文章目录 一、Grafana 8.x 插件模块目录穿越漏洞&#xff08;CVE-2021-43798&#xff09;二、Apache Druid 代码执行漏洞&#xff08;CVE-2021-25646&#xff09; 一、Grafana 8.x 插件模块目录穿越漏洞&#xff08;CVE-2021-43798&#xff09; Grafana是一个系统监测工具。 利…...

编程日记 2024/5/14 18:03:26

AI赋能EasyCVR视频汇聚/视频监控平台加快医院安防体系数字化转型升级

近来&#xff0c;云南镇雄一医院发生持刀伤人事件持续发酵&#xff0c;目前已造成2人死亡21人受伤。此类事件在医院层出不穷&#xff0c;有的是因为医患纠纷、有的是因为打架斗殴。而且在每日大量流动的人口中&#xff0c;一些不法分子也将罪恶的手伸到了医院&#xff0c;实行扒…...

编程日记 2024/5/14 18:02:25

Cocos Creator 3.x 实现触摸拖动物体（record）

参考&#xff1a;如何实现拖动物体 - Creator 3.x - Cocos中文社区 //注册触摸事件 node.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this); //事件回调函数 onTouchMove(event) {const location event.getUILocation();event.target.setWorldPosition(location.x, lo…...

编程日记 2024/5/14 17:59:21

漏桶算法：稳定处理大量突发流量的秘密武器！

漏桶算法的介绍 我们经常会遇到这样一种情况&#xff1a;数据包的发送速率不稳定&#xff0c;而网络的带宽有限。如果在短时间内有大量的数据包涌入&#xff0c;那么网络就会出现拥塞&#xff0c;数据包的丢失率就会增大。为了解决这个问题&#xff0c;人们提出了一种叫做“漏…...

编程日记 2024/5/14 17:57:18

淘宝数据分析——Python爬虫模式♥

大数据时代&#xff0c; 数据收集不仅是科学研究的基石&#xff0c; 更是企业决策的关键。 然而&#xff0c;如何高效地收集数据 成了摆在我们面前的一项重要任务。 本文将为你揭示&#xff0c; 一系列实时数据采集方法&#xff0c; 助你在信息洪流中&#xff0c; 找到…...

编程日记 2024/5/14 17:56:17

5G消息和5G阅信的释义与区别 | 赛邮科普

5G消息和5G阅信的释义与区别 | 赛邮科普 在 5G 技术全面普及的当下&#xff0c;历史悠久的短信服务也迎来了前所未有的变革。5G 阅信和 5G 消息就是应运而生的两种短信形态&#xff0c;为企业和消费者带来更加丰富的功能和更加优质的体验。 这两个产品名字和形态都比较接近&am…...

编程日记 2024/5/14 17:55:16

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2025/12/27 15:17:01

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

编程新知 2025/10/7 2:47:54

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/12/20 12:32:08

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

编程新知 2025/11/17 18:58:56

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

编程新知 2025/12/11 5:02:54

安卓基础（aar）

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

编程新知 2025/12/26 18:51:33

使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

编程新知 2025/10/4 3:01:43

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

编程新知 2025/12/28 5:28:13

IP如何挑？2025年海外专线IP如何购买？

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

编程新知 2025/10/19 9:49:56

（一）单例模式

一、前言 单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

编程新知 2025/12/28 21:12:02