canvas根据图片生成粒子动画
效果展示:
canvas根据图片生成粒子动画效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/dee3a72458374c768a3e6413f52e0f45.png)
注意: 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;}