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;}</style><title>文本粒子动画</title>
</head><body><script>const canvas = document.createElement('canvas');canvas.width = window.innerWidth;canvas.height = window.innerHeight;document.body.appendChild(canvas);const ctx = canvas.getContext('2d');// 粒子类  class Particle {constructor(x, y) {this.x = x;this.y = y;this.size = Math.random() * 6 + 1; // 随机大小  this.velocityY = Math.random() * 10 - 0.5; // 垂直速度  this.velocityX = Math.random() * 20 - 1; // 水平速度  this.alpha = Math.random(); // 透明度  this.lifespan = Math.random() * 200 + 100; // 生命周期  }// 更新粒子  update() {this.x += this.velocityX;this.y += this.velocityY + 0.5; // 重力效果  this.alpha -= 0.01; // 随时间减少透明度  this.lifespan--;// 如果粒子生命周期结束,则移除它  if (this.lifespan <= 0) {return true;}// 设置颜色  ctx.globalAlpha = this.alpha;ctx.beginPath();ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);ctx.fillStyle = `hsl(${360 * Math.random()}, 100%, 50%)`; // 随机颜色  ctx.fill();return false;}}// 粒子数组  let particles = [];// 渲染火焰  function renderFlame() {ctx.clearRect(0, 0, canvas.width, canvas.height);particles = particles.filter(particle => {return !particle.update();});requestAnimationFrame(renderFlame);}// 在鼠标移动时创建新的粒子  canvas.addEventListener('click', (e) => {const rect = canvas.getBoundingClientRect();const x = e.clientX - rect.left;const y = e.clientY - rect.top;// 清除之前的粒子(可选,如果你想在每次鼠标移动时都重新开始)  particles = [];// 在鼠标位置附近创建粒子  createFlame(x, y);});// 创建火焰(粒子)  function createFlame(x, y) {for (let i = 0; i < 100; i++) {// 为了使粒子从鼠标位置向四周扩散,可以添加一些随机性  const offsetX = (Math.random() - 0.5) * 50;const offsetY = (Math.random() - 0.5) * 50;particles.push(new Particle(x + offsetX, y + offsetY));}}// 开始渲染  renderFlame();// 窗口大小变化时调整canvas大小  window.addEventListener('resize', () => {canvas.width = window.innerWidth;canvas.height = window.innerHeight;});</script>
</body></html>

3.结语

文本粒子动画是一种引人注目的视觉效果,通过使用HTML5 Canvas和JavaScript实现,能够为网页增添活力和趣味。本文利用前端技术实现一个简单的文本粒子动画效果。
我们定义了一个粒子类,每个粒子具有自己的位置、大小、速度、透明度和生命周期等属性。通过不断更新粒子的位置、大小和透明度,再结合随机颜色填充,从而实现了点击鼠标会有天女散花般的动态效果。如果需要更改粒子,让它变成真的花花,参考这篇文章:爱心粒子特效

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

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

相关文章

工控一体机10.1寸显示器电容触摸屏(YA1308101JK)产品规格说明书

如果您对工控一体机有任何疑问或需求&#xff0c;或者对如何集成工控一体机到您的业务感兴趣&#xff0c;可移步控芯捷科技。 一、硬件功能介绍 YA1308101JK产品介绍&#xff1a; YA1308101JK搭载 Android10 主流操作系统&#xff0c;具有系统版本更高、占用内存更低、运行效率…

【领导力SE模型影响地图】如何分辨一个管理者有没有好的领导力? ​

影响地图是以思维导图的形式&#xff0c;在业务目标和交付物之间建立起强关联。 影响地图分为四个层级&#xff1a; 第1层级&#xff1a;目标&#xff08;Why&#xff09;- 想要达成的业务目标。 第2层级&#xff1a;利益相关者&#xff08;Who&#xff09;- 谁能够帮助达成…

新能源汽车推行精益生产:绿色动力下的效率革命

在新能源汽车行业迅猛发展的当下&#xff0c;推行精益生产已成为提升竞争力的关键所在。精益生产&#xff0c;作为一种以客户需求为导向、追求流程最优化和浪费最小化的管理理念&#xff0c;正逐步在新能源汽车领域展现出其独特的魅力。 新能源汽车的兴起&#xff0c;不仅代表了…

如何本地 Debug React 源码

日常开发过程中&#xff0c;有时 debug react 源代码进行问题排查。一种方案是直接把通过 html 引入进来&#xff0c;另外一种是编译并通过 yarn 链接到项目中&#xff0c;本地将介绍如何通过这两种方法进行代码 Debug。 页面引入源代码方式 这种方式比较简单&#xff0c;直接…

眼精星和金鸣识别新增智能结构化识别,助您快速筛选和统计数据

熟悉眼精星票证识别系统或金鸣表格文字识别大师的用户都知道&#xff0c;近日&#xff0c;这二款软件同时上线了“智能结构化”功能&#xff0c;那么&#xff0c;什么是智能结构化呢&#xff1f; 准确地说&#xff0c;我们这里的智能结构化应为OCR智能结构化&#xff0c;因为它…

多家大模型公司被爆“卖身”,有创业者称接单能力很重要

百模大战下&#xff0c;行业开始“洗牌”。 据外媒《The Information》的报道&#xff0c;随着底层通用大模型格局的基本落成&#xff0c;投资者的热情正在转向支持人形机器人等其他技术。 与此同时&#xff0c;科技巨头和生成式AI的早期赢家也正在加速掀起一场新浪潮&#x…

Flink搭建

目录 一、standalone模式 二、Flink on Yarn模式 一、standalone模式 解压安装Flink [rootbigdata1 software]# tar -zxvf flink-1.14.0-bin-scala_2.12.tgz -C /opt/module/ [rootbigdata1 module]# mv flink-1.14.0/ flink-standalone 2.进入conf修改flink-conf.yaml job…

Linux:系统安全及应用

一、账号安全控制 1、账号安全基本措施 &#xff08;1&#xff09;系统账号清理 a、将非登录用户的Shall设为/sbin/nologin usermod -s/sbin/nologin 用户名 b、锁定长期不使用的账号 usermod -L 用户名 passwd -l 用户名 passwd -S 用户名 c、删除无用的账号…

KaiwuDB 受邀出席中国智能化油气管道与智慧管网技术交流大会

导 读 5月22-24日&#xff0c;由中国石油学会石油储运专业委员会、石油工业标准化技术委员会油气储运专标委等联合主办的“第十三届中国智能化油气管道与智慧管网技术交流大会”在浙江省杭州市盛大召开&#xff0c;KaiwuDB 受邀亮相大会。浪潮院士、山东浪潮数据库技术有限公司…

后台接口搭建步骤Django框架(pycharm社区版一样适用)

第一步&#xff1a;创建项目 打开命令行界面&#xff0c;输入以下命令&#xff1a; django-admin startproject (项目名称) 第二步&#xff1a;创建应用 进入项目根目录&#xff0c;确保与manage.py文件处于同一级&#xff0c;输入下述命令&#xff1a; python manage.py …

二区5分纯生信|单细胞+非负矩阵+AlphaFold+机器学习组合

说在前面 学文不看刊 这篇分析总体来说工作量不算大&#xff0c;scRNA联合bulkRNA分析&#xff0c;多种机器学习组合预测模型&#xff0c;最后用了AlphaFold2预测蛋白及AutoDock分子对接 非常适合小白学习和模仿&#xff0c;其次在筛选出核心基因后可以再加几个外部数据集观…

勒索软件统计数据揭示了网络勒索的惊人速度

本文通过各种报告摘录&#xff0c;提供了有关当前勒索软件形势的统计数据和见解。 全球勒索病毒危机加剧 NTT安全控股《2024全球威胁情报报告》&#xff08;2024年5月&#xff09; 据NTT安全控股公司的《2024年全球威胁情报报告》显示&#xff0c;勒索软件和勒索事件在2023年激…

50 http通用服务器

虽然我们说&#xff0c;应用层协议是我们程序猿自己定的 但实际上&#xff0c;已经有大佬们定义了一些现成的&#xff0c;又非常好用的应用层协议&#xff0c;供我们直接参考使用&#xff0c;http&#xff08;超文本传输协议&#xff09;就是其中之一 目录 认识urlurlencode和…

为WPF的Grid添加网格边框线

在WPF中使用Grid绘制表格的时候&#xff0c;如果元素较多、排列复杂的话&#xff0c;界面会看起来很糟糕&#xff0c;没有层次&#xff0c;这时用网格或边框线分割各元素&#xff08;标签或单元格&#xff09;将会是页面看起来整齐有条理。 默认没有边框线的如下图所示&#xf…

二叉树习题精讲-相同的树

相同的树 100. 相同的树 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/same-tree/description/ /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/ bool i…

OpenSSL自签名证书

文章目录 生成1. 生成根证书的私钥&#xff08;root_private_key.pem&#xff09;2. 创建根证书的CSR和自签名证书&#xff08;root_csr.pem&#xff09;3. 生成服务器证书的私钥&#xff08;server_private_key.pem&#xff09;4. 创建服务器证书的CSR&#xff08;server_priv…

考研经验总结——复试上岸(附通信原理)

上岸啦&#xff0c;一志愿拟录取&#xff0c;初试第5、复试4&#xff0c;总成绩第4 文章目录 一、复试流程二、注意事项三、简历模板3.1 基本信息3.2 报考情况3.3 校内实践3.4 荣誉奖励3.5 项目经验3.6 自我介绍 四、通信原理五、最后的总结 一、复试流程 1、 复试流程 准备复…

设计模式(简要,应付软考)

简单工厂模式(Simple Factory Pattern): 又称为静态工厂方法(Static Factory Method)模式,它属于类创建型模式。在简单工厂模式中,可以根据参数的不同返回不同类的实例。简单工厂模式专门定义一个类来负责创建其他类的实例,被创建的实例通常都具有共同的父类。 单例实例&#…

03- Redis 中的 Hash 数据类型和应用场景

1. 介绍 Hash 是一个键值对&#xff08;key - value&#xff09;集合&#xff0c;其中 value 形式如&#xff1a; value [{field1, value1}, ...{fieldN, valueN}]。Hash 特别适合用于存储对象。 Hash 和 String 对象的区别如下&#xff1a; Redis Stringuid:1:name ------…

如何让APP打开时无广告(一秒学会)

相信大家平时在玩手机的时候多多少少都会在意过打开app时的启动广告&#xff0c;虽然可以自己点击跳过&#xff0c;但是确实十分麻烦&#xff0c;很多人想知道如何跳过app启动广告。 现在网上很多切换手机中英文、安装拦截软件等等&#xff0c;我都试过了&#xff01; 统统不管…