CSS文本粒子动画特效之爱心粒子文字特效-Canvas
1. 效果图
2.完整代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>body,html {margin: 0;padding: 0;width: 100%;height: 100%;overflow: hidden;}canvas {display: block;}</style><title>文本粒子动画</title>
</head><body><canvas id="textCanvas"></canvas><script>const canvas = document.getElementById('textCanvas');const ctx = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;const particles = [];const fontSize = 100;const text = '果粒橙汁儿up好腻害'; // 这里更改粒子文案ctx.font = `${fontSize}px Arial`;ctx.fillStyle = 'black';ctx.textAlign = 'center';ctx.fillText(text, canvas.width / 2, canvas.height / 2);const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);class Particle {constructor(x, y) {this.type = 'default'; // 定义粒子类型 分'image'和'default'this.x = x;this.y = y;if (this.type === 'image') {this.size = 10; // 调整粒子大小} else {this.size = 2; // 调整粒子大小}this.baseX = this.x;this.baseY = this.y;this.density = (Math.random() * 30) + 1;this.image = new Image();this.image.src = './heart.jpeg'; // 使用自定义的图像 路径写自己存放图片的途径和图片名字}draw() {if (this.type === 'image') {ctx.drawImage(this.image, this.x - this.size / 2, this.y - this.size / 2, this.size, this.size);} else {// 绘制其他类型的粒子ctx.fillStyle = 'black'; // 这里更改粒子颜色// ctx.fillStyle = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}`; // 随机彩色粒子ctx.beginPath();ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);ctx.closePath();ctx.fill();}}update() {let dx = mouse.x - this.x;let dy = mouse.y - this.y;let distance = Math.sqrt(dx * dx + dy * dy);let forceDirectionX = dx / distance;let forceDirectionY = dy / distance;let maxDistance = mouse.radius;let force = (maxDistance - distance) / maxDistance;let directionX = forceDirectionX * force * this.density;let directionY = forceDirectionY * force * this.density;if (distance < mouse.radius) {this.x -= directionX;this.y -= directionY;} else {if (this.x !== this.baseX) {let dx = this.x - this.baseX;this.x -= dx / 5;}if (this.y !== this.baseY) {let dy = this.y - this.baseY;this.y -= dy / 5;}}}}let mouse = {x: null,y: null,radius: 150};window.addEventListener('mousemove', function (event) {mouse.x = event.x;mouse.y = event.y;});function init() {for (let y = 0, y2 = imageData.height; y < y2; y += 4) {for (let x = 0, x2 = imageData.width; x < x2; x += 4) {if (imageData.data[(y * 4 * imageData.width) + (x * 4) + 3] > 128) {let positionX = x;let positionY = y;particles.push(new Particle(positionX, positionY));}}}}function animate() {requestAnimationFrame(animate);ctx.clearRect(0, 0, canvas.width, canvas.height);for (let i = 0; i < particles.length; i++) {particles[i].draw();particles[i].update();}}init();animate();</script>
</body></html>
代码出来的效果是黑色的，如果想要示例图那种爱心粒子，可以将type改成image，并且改变图片路径this.image.src，如果想要改变文案则改变text变量，如果要改变粒子颜色则改变ctx.fillStyle即可~
本案例使用的图片素材放在文章里啦，自取
相关文章：
CSS文本粒子动画特效之爱心粒子文字特效-Canvas
1. 效果图 2.完整代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><style>body,html {margin: 0;paddin…...
小熊家务帮day5 客户管理模块1 （小程序认证，手机验证码认证等）
客户管理模块 1.认证模块1.1 认证方式介绍1.1.1 小程序认证1.1.2 手机验证码登录1.1.3 账号密码认证 1.2 小程序认证1.2.1 小程序申请1.2.2 创建客户后端工程jzo2o-customer1.2.3 开发部署前端1.2.4 小程序认证流程1.2.4.1 customer小程序认证接口设计Controller层Service层调用…...
Blender 学习笔记（一）快捷键记录
Blender 的快捷键映射非常强大，如果学会将会快速提高工作效率，本文抄自 Blender 4.1 Manual，基于 Blender 4.1，因为自己使用 Windows，所以只记录 Windows 相关快捷键。 全局快捷键 键位作用ctrl0打开文件ctrls保存文…...
 源码编译cryptopp库 - apt版本过旧)
ubuntu linux (20.04) 源码编译cryptopp库 - apt版本过旧
下载最新版 https://www.cryptopp.com/#download 编译安装： #下载Cryptopp源码 #git clone https://gitee.com/PaddleGitee/cryptopp.git#进入文件夹 cd cryptopp #编译，多cpu处理 make -j8 #安装，默认路径：/usr/local sudo m…...
机器学习-3-特征工程的重要性及常用特征选择方法
参考特征重要性：理解机器学习模型预测中的关键因素 参考[数据分析]特征选择的方法 1 特征重要性 特征重要性帮助我们理解哪些特征或变量对模型预测的影响最大。 特征重要性是数据科学中一个至关重要的概念，尤其是在建立预测性任务的模型时。想象你正在尝试预测明天是否会下…...
QGis3.34.5工具软件保存样式，软件无反应问题
在使用QGis软件保存SLD样式的时候，每次保存样式，软件都进入无反应状态，导致无法生成样式文件 百度中多次查询问题点，终未能在在3.34.5这个版本上解决问题。 考虑到可能是软件本身问题，于是删除了3.34.5这个版本&#x…...
JavaScript（ES6）入门
ES6 1、介绍 ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript 语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。…...
深入分析 Android Activity (十)
文章目录 深入分析 Android Activity (十)1. Activity 的资源管理1.1 使用资源 ID 访问资源1.2 Drawable 资源1.3 使用 TypedArray 管理资源1.4 使用资源配置 2. Activity 的数据存储2.1 SharedPreferences2.2 文件存储2.3 SQLite 数据库2.4 ContentProvider 3. Activity 的性能…...
考试“挂了“用日语怎么说，柯桥商务日语培训
1、もえる 热衷于……，燃烧 除了“燃烧”，还有“热衷于……”的意思，如“家が燃える（房子着火了）”，“勉強に燃える（热衷于学习）”。 Ａ：今（いま&…...
【机器学习300问】103、简单的经典卷积神经网络结构设计成什么样？以LeNet-5为例说明。
一个简单的经典CNN网络结构由：输入层、卷积层、池化层、全连接层和输出层，这五种神经网络层结构组成。它最最经典的实例是LeNet-5，它最早被设计用于手写数字识别任务，包含两个卷积层、两个池化层、几个全连接层，以及最…...
【代码随想录算法训练营第37期 第二十一天 | LeetCode530.二叉搜索树的最小绝对差、501.二叉搜索树中的众数、236. 二叉树的最近公共祖先】
代码随想录算法训练营第37期 第二十一天 | LeetCode530.二叉搜索树的最小绝对差、501.二叉搜索树中的众数、236. 二叉树的最近公共祖先 一、530.二叉搜索树的最小绝对差 解题代码C： /*** Definition for a binary tree node.* struct TreeNode {* int val;* …...
2023 年网络等级保护考试题库及答案
一、单项选择题 1.在等保 1.0 的根本要求中，网络设备防护的内容归属于网络安全，在等保 2.0 中将其归属到〔〕。 A 安全通信网络 B 安全区域边界 C 安全计算环境 D 安全治理中心 答案：c 2.应成立指导和治理网络安全工作的委员会或领导小组&…...
springboot集成nacos
springboot集成nacos 1.版本2. POM依赖3. nacos服务3.1 下载nacos压缩包3.2 启动nacos 4. yaml配置5.Demo5.1 配置中心简单格式获取方式普通方式还可以再启动类上添加注解完成5.2 获取json格式的demo5.2 自动注册根据yaml配置 1.版本 nacos版本:2.3.2 springboot版本ÿ…...
NoSQL数据库技术与应用 教学设计
《NoSQL数据库技术与应用》 教学设计 课程名称：NoSQL数据库技术与应用 授课年级： 20xx年级 授课学期： 20xx学年第一学期 教师姓名： 某某老师 2020年5月6日 课题 名称 第1章 初识NoSQL 计划 学时 3 课时 内容 分析 随着云计算、…...
比较（一）利用python绘制条形图
比较（一）利用python绘制条形图 条形图（Barplot）简介 条形图主要用来比较不同类别间的数据差异，一条轴表示类别，另一条则表示对应的数值度量。 快速绘制 基于seaborn import seaborn as sns import matplo…...
【面试】Oracle JDK和Open JDK什么关系？
目录 1. 起源与发展2. 代码与许可3. 功能与组件4. 使用场景5. 版本更新与支持 1. 起源与发展 1.Oracle JDK是由Oracle公司基于Open JDK源代码开发的商业版本。2.Open JDK是java语言的一个开源实现。 2. 代码与许可 1.Oracle JDK包含了闭源组件，并根据二进制代码许…...
科学技术创新杂志科学技术创新杂志社科学技术创新编辑部2024年第10期目录
科技创新 单桩穿越岩溶发育地层力学特征与溶洞处置措施研究 刘飞; 1-7《科学技术创新》投稿：cnqikantg126.com 基于多目标优化的中低压配电网电力规划研究 向星山;杨承俊;张寒月; 8-11 激光雷达测绘技术在工程测绘中的应用研究 张军伟;闫宏昌; 12-15 …...
ES数据导出成csv文件
推荐使用es2csv 工具。 命令行实用程序，用Python编写，用于用Lucene查询语法或查询DSL语法查询Elasticsearch，并将结果作为文档导出到CSV文件中。该工具可以在多个索引中查询批量文档，并且只获取选定的字段，这减少了查…...
结构型设计模式之装饰模式
文章目录 概述装饰模式原理代码案例小结 概述 装饰模式(decorator pattern) 的原始定义是：动态的给一个对象添加一些额外的职责. 就扩展功能而言,装饰器模式提供了一种比使用子类更加灵活的替代方案。 装饰模式原理 装饰模式中的角色： 抽象构件角色 …...
Java - 当年很流行，现在已经淘汰的 Java 技术，请不要在继续学了！！！
最近这段时间收到了一些读者的私信，问我某个技术要不要学，还有一些在国外的同学竟然对 Java 图形化很感兴趣，还想找这方面的工作。 比较忙，一直没抽出时间去回答这类问题，刚好看到我关注的一位大佬回答过，这…...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中，我们已经大致实现了rpc服务端的各项功能代…...
使用rpicam-app通过网络流式传输视频)
树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频
使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源： http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...
以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：
一、属性动画概述NETX 作用：实现组件通用属性的渐变过渡效果，提升用户体验。支持属性：width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项： 布局类属性（如宽高）变化时&#…...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
MODBUS TCP转CANopen 技术赋能高效协同作业
在现代工业自动化领域，MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步，这两种通讯协议也正在被逐步融合，形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...
python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）
更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
css的定位（position）详解：相对定位 绝对定位 固定定位
在 CSS 中，元素的定位通过 position 属性控制，共有 5 种定位模式：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和…...
R语言速释制剂QBD解决方案之三
本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...
人机融合智能 | “人智交互”跨学科新领域
本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...
【网络安全】开源系统getshell漏洞挖掘
审计过程： 在入口文件admin/index.php中： 用户可以通过m,c,a等参数控制加载的文件和方法，在app/system/entrance.php中存在重点代码： 当M_TYPE system并且M_MODULE include时，会设置常量PATH_OWN_FILE为PATH_APP.M_T…...