canvas根据图片生成粒子动画

Fish北冥

已于 2024-08-01 16:01:45 修改

阅读量354

点赞数 4

分类专栏： JS jQuery 文章标签：前端 javascript

于 2024-08-01 15:55:00 首次发布

本文链接：https://blog.csdn.net/qq_42400124/article/details/140844274

版权

JS 同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

jQuery

13 篇文章 2 订阅

订阅专栏

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;}