canvas根据图片生成粒子动画

canvas根据图片生成粒子动画

效果展示:

canvas根据图片生成粒子动画效果


在这里插入图片描述
注意: js和css的引入
id: cartoonDot-img对应的是被 拷贝的图像,后期要替换的 粒子图像就在这
min.js 地址

HTML代码块

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>canvas粒子动画</title><link rel="stylesheet" href="css/style.css"></head><body><div class="bannerwrap"><div class="banner"><img src="img/bannerOne1.png" class="bg01"/><img src="img/bg004.png" class="bg02"/><img src="img/bg004.png" class="bg03"/></div><div class="banner-dot"><canvas id="cartoonDot-text"></canvas></div><div class="banner-cont"><div class="contain"><div class="banner-cont-dot"><img id="cartoonDot-img" src="img/zw.png" alt="" /></div><div class="banner-cont-wrap"><p>P is one of the necessary nutrition elements for plant growing</p></div></div></div></div><script src="js/jquery.js"></script><script src="js/min.js"></script></body>
</html>

style.css代码块

body,input,h1,h2,h3,h4,h5,h6,b,c,e,i,g,p,div,dl,dt,dd,select,textarea,font,right,left{ margin:0; padding:0;color:#555; font-size:12px;font-family:Arial,Source; line-height:1;font-weight: normal;letter-spacing: 0;}
html,body{height:100%;position:relative;width: 100%;background-color: #ffffff;}
img{display: block;}
a{ color:#333; text-decoration:none;}
ul, ol, li, dl, dd {margin: 0;padding: 0; list-style:none;}
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6,span,dd,dt,b,c,e,a,font,right,left{ -webkit-text-size-adjust:100%;}
.fl{float: left;}
.fr{float: right;}
.clearfix:after{display: block;content: '';clear: both;}
.bg_big{width: 100%;height: auto;background-color: #f8f8f8;font-family: arial;}/* bannerwrap */
.bannerwrap{width: 100%;height: 100%;position: relative;overflow: hidden;}
.banner{width: 100%;height: 100%;position: relative;z-index: 1;pointer-events: none;}
.banner img.bg01{width: 100%;height: 100%;object-fit: cover;position: absolute;left: 0;top: 0;}
.banner img.bg02{position: absolute;left: 20%;bottom: 50%;width: 100%;}
.banner img.bg03{position: absolute;left: 0;top: -10%;width: 100%;}
.banner-dot{position: absolute;width: 100%;height: 100%;top: 0;left: 0;}
.banner-dot #cartoonDot-text{width: 100% !important;height: 100% !important;}
.banner-cont{position: absolute;width: 100%;color: #fff;height: 100%;top: 0;left: 0;z-index: 2;pointer-events: none;display: flex;align-items: center;justify-content: center;}
.banner-cont{width: 100%;text-align: center;}
.banner-cont-wrap{width: 100%;}
.banner-cont-wrap p{font-size: 24px;color: #fff;line-height: 30px;margin-top: 50px;}
.banner-cont-dot{width: 460px;margin: auto;}
.banner-cont-dot img{width: 100%;visibility: hidden;}

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

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

相关文章

系统架构师考点--系统架构设计(中)

大家好。今天继续总结一下系统架构设计的一些考点。 一、软件架构复用 软件产品线是指一组软件密集型系统&#xff0c;它们共享一个公共的、可管理的特性集&#xff0c;满足某个特定市场或任务的具体需要&#xff0c;是以规定的方式用公共的核心资产集成开发出来的。即围绕核…

SpringBoot 日志:从基础到高级的全面指南

&#x1f4da; SpringBoot 日志&#xff1a;从基础到高级的全面指南 &#x1f50d; &#x1f4da; SpringBoot 日志&#xff1a;从基础到高级的全面指南 &#x1f50d;摘要引言正文内容一、日志概述 &#x1f4dc;二、日志使用 &#x1f4dd;2.1 打印日志 &#x1f4e3;2.2 日志…

IIS解析漏洞~ IIS7.漏洞分析

IIS解析漏洞 文件解析漏洞是由于中间件错误的将特殊格式的文件解析成可执行网页文件(脚本)&#xff0c;配合文件上传漏洞进行GetShell的漏洞&#xff01; 1.2&#xff1a;IIS7.X 在IIS7.0和IIS7.5版本下也存在解析漏洞&#xff0c;在默认Fast-CGI开启状况下&#xff0c;在一个文…

DM集群的高可用的配置方式(多语言)

一、介绍 强调以下&#xff1a;dm_svc.conf必须放置到应用服务器上才行&#xff0c;放到其他服务器上识别不到。 文章中有的框架可能没写到并不代表不支持&#xff0c;有没提到的可文章下方留言。 1.dm_svc.conf的作用&#xff1a; dm_svc.conf文件主要是为了当DM数据库集群…

PHP健身微信小程序系统源码

&#x1f3cb;️‍♀️健身新潮流&#xff01;解锁“健身微信小程序”的全方位塑形秘籍 &#x1f4f1;开篇&#xff1a;掌中健身房&#xff0c;随时随地动起来 你还在为找不到合适的健身场地或教练而烦恼吗&#xff1f;是时候告别这些束缚&#xff0c;拥抱“健身微信小程序”…

如何在数据埋点中发现和修复数据上报逻辑错误

如何发现和处理数据埋点中的逻辑错误 在大数据分析中,数据埋点是至关重要的一环。然而,当我们遇到数据上报逻辑错误时,该如何应对呢?本文将为你揭示解决这一棘手问题的有效方法。 目录 如何发现和处理数据埋点中的逻辑错误什么是数据上报逻辑错误?如何发现数据上报逻辑错误…

S32G3系列芯片Serial Boot功能详解!

《S32G3系列芯片——Boot详解》系列——S32G3系列芯片Serial Boot功能详解&#xff01;★★★ 一、Serial Boot模式概述二、串行下载协议2.1 基于UART和CAN的下载协议概述2.2 基于FlexCAN的Serial Boot2.2.1 IO配置2.2.2 时钟配置2.2.3 通信波特率2.2.4 基于FlexCAN的Serial Bo…

定义和使用自己的子程序——函数的介绍

定义和使用自己的子程序——函数的介绍 1.函数基础语法1.1.基础语法1.2.例题1——距离函数题目描述输入格式输出格式输入输出样例输入 #1输出 #1 提示 2.void类型3.变量作用域和参数传递3.1.局部变量和全局变量3.2.形式参数和实际参数3.3.例题2——歌唱比赛题目描述输入格式输出…

计算机基础(Windows 10+Office 2016)教程 —— 第6章 电子表格软件Excel 2016(下)

电子表格软件Excel 2016 6.4 Excel 2016的公式与函数6.4.1 公式的概念6.4.2 公式的使用6.4.3 单元格的引用6.4.4 函数的使用6.4.5 快速计算与自动求和 6.5 Excel 2016的数据管理6.5.1 数据排序6.5.2 数据筛选6.5.3 分类汇总6.5.4 分组显示6.5.5 合并计算 6.6 Excel 2016的图表6…

【RabbitMQ】通配符模式(Topics)

一、基本概念 生产者&#xff08;Producer&#xff09;&#xff1a;发送消息到RabbitMQ交换机的程序。生产者定义消息的路由键&#xff0c;用于标识消息的目的地。交换机&#xff08;Exchange&#xff09;&#xff1a;接收生产者发送的消息&#xff0c;并根据路由键和绑定规则…

一款.NET开源、跨平台的DASH/HLS/MSS下载工具

前言 今天大姚给大家分享一款.NET开源&#xff08;MIT License&#xff09;、免费、跨平台的DASH/HLS/MSS下载工具&#xff0c;并且支持点播和直播&#xff08;DASH/HLS&#xff09;的内容下载&#xff1a;N_m3u8DL-RE。 网络流媒体传输协议介绍 DASH DASH是一种基于HTTP的…

2024年8月1日(前端服务器的配置以及tomcat环境的配置)

[rootstatic ~]# cd eleme_web/ [rootstatic eleme_web]# cd src/ [rootstatic src]# ls views/ AboutView.vue HomeView.vue [rootstatic src]# vim views/HomeView.vue [rootstatic src]# nohup npm run serve nohup: 忽略输入并把输出追加到"nohup.out" 构建项目…

零基础入门转录组数据分析——机器学习算法之boruta(筛选特征基因)

零基础入门转录组数据分析——机器学习算法之boruta&#xff08;筛选特征基因&#xff09; 目录 零基础入门转录组数据分析——机器学习算法之boruta&#xff08;筛选特征基因&#xff09;1. boruta基础知识2. boruta&#xff08;Rstudio&#xff09;——代码实操2. 1 数据处理…

机器学习之贝叶斯方法

机器学习之贝叶斯方法 1. 贝叶斯定理基础1.1 贝叶斯定理公式1.2 先验概率 (Prior Probability)1.3 后验概率 (Posterior Probability)1.4 似然 (Likelihood)1.5 证据 (Evidence)1.6 贝叶斯定理的应用实例 2. 贝叶斯方法的基本概念2.1 条件概率 (Conditional Probability)2.2 全…

Python SDK 使用Azure Document intelligence报错(404) Resource not found

最近项目需要使用到Azure Document intelligence,于是去做POC&#xff0c;但是发现最简单的demo跑的时候都会报这个错&#xff0c;解决了一下午终于搞定了&#xff0c;记录下。 首先是官方文档&#xff1a;Quickstart: Document Intelligence (formerly Form Recognizer) clien…

反序列化漏洞vulhub靶场serial

环境搭建 下载 https://download.vulnhub.com/serial/serial.zip 解压出来就是这种 你会得到一个这样的文件&#xff0c;这里使用VMware新建一个虚拟机&#xff0c;这里记录比较重要的几部分。 这里就是使用我们刚才下过来的。 漏洞过程详解 1.信息收集 打开靶机&#xff0…

IDEA切换分支,会影响当前在跑的项目吗?

说明&#xff1a;本文测试&#xff0c;在IDEA中运行项目&#xff0c;然后切换分支&#xff0c;是否会影响当前正在跑的项目 准备工作 首先&#xff0c;创建一个Git项目&#xff0c;接口如下&#xff1a; import org.springframework.web.bind.annotation.GetMapping; import…

13. 文本框和单选题

属性说明type指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button&#xff0c;默认为textname指定表单元素的名称value元素的初始值。type为radio时必须指定一个值size指定表单元素的初识宽度&#xff0c;当type为text或password时&…

3.Java面试题之AQS

1. 写在前面 AQS&#xff08;AbstractQueuedSynchronizer&#xff09;是Java并发包&#xff08;java.util.concurrent&#xff09;中的一个抽象类&#xff0c;用于实现同步器&#xff08;如锁、信号量、栅栏等&#xff09;。AQS提供了一种基于FIFO队列的机制来管理线程的竞争和…

【RabbitMQ】路由模式(Routing)

一、基本概念 生产者&#xff08;Producer&#xff09;&#xff1a;发送消息到交换机的程序。在发送消息时&#xff0c;需要指定一个路由键。交换机&#xff08;Exchange&#xff09;&#xff1a;接收生产者发送的消息&#xff0c;并根据路由键将消息路由到与之匹配的队列。在…