canvas元素粒子隨機(jī)飄動(dòng)

canvas繪制各種彩色粒子元素，放大縮小隨機(jī)飄動(dòng)背景動(dòng)畫(huà)。支持鼠標(biāo)跟隨控制。隨機(jī)生成動(dòng)畫(huà)，默認(rèn)無(wú)控制。生成點(diǎn)尺寸設(shè)置。生成點(diǎn)的類(lèi)型。生成點(diǎn)顏色列表，隨機(jī)刷新顏色等功能。

使用方法：

1、head引入css文件

<style type="text/css">
body {
	margin: 0;
	padding: 0;
	background-color: #222222
}

body::-webkit-scrollbar {
	display: none;
}
</style>

2、head引入js文件

<script src="js/jquery.min.js" type="text/javascript"></script>

3、body引入HTML代碼

<canvas class="canvas"></canvas>

<script src="js/particle.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var c = new Cbg({
	container: ".canvas",
	//隨機(jī)生成動(dòng)畫(huà)，默認(rèn)無(wú)控制
	control: "auto",
	//鼠標(biāo)跟隨控制
	//control: "mouse",
	//坐標(biāo)點(diǎn)定位控制
	//control: "coordinate",
	//設(shè)置坐標(biāo)點(diǎn)，默認(rèn)屏幕中心，坐標(biāo)點(diǎn)定位控制時(shí)使用
	//x: $(window).width() / 2,
	//y: $(window).height() / 2
	//Canvas寬度高度自定義,默認(rèn)全屏
	width: $(window).width(),
	height: $(window).height(),
	//生成點(diǎn)尺寸設(shè)置
	//size: [初始大小, 尺寸衰減速率（數(shù)值越大，尺寸縮減越快，反之越慢，最小不得小于0.01）],
	size: [10, 0.2],
	//生成點(diǎn)的類(lèi)型，type
	//type：color 生成點(diǎn)為顏色塊
	type: "color",
	//生成點(diǎn)顏色列表，隨機(jī)刷新顏色
	color: ["#6525EE", "#007AFF", "orange", "orangered"],
	//生成點(diǎn)顏色單值，固定顏色刷新
	//color: "red",

	//type：img 生成點(diǎn)為圖片，圖片比例1：1
	//type: "img",
	//生成點(diǎn)圖片列表，隨機(jī)刷新圖片
	//imgUrl: ["圖片路徑", "圖片路徑"，....],
	//生成點(diǎn)圖片單值，固定圖片刷新
	//imgUrl: "圖片路徑",
	//動(dòng)畫(huà)類(lèi)型：
	//animation_type: 0（默認(rèn)動(dòng)畫(huà)，隨機(jī)方位，隨機(jī)方向）
	//animation_type: 1（向左運(yùn)動(dòng)）
	//animation_type: 2（向右運(yùn)動(dòng)）
	//animation_type: 3（向下運(yùn)動(dòng)）
	//animation_type: 4（向上運(yùn)動(dòng)）
	animation_type: 0,
	//生成點(diǎn)生成速率，數(shù)值越大，點(diǎn)的生成越慢
	speed: 10,
})
</script>

使用聲明

1. 本站所有素材（未指定商用），僅限學(xué)習(xí)交流。
2. 會(huì)員在本站下載的原創(chuàng)商用和VIP素材后，只擁有使用權(quán)，著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材，未經(jīng)合法授權(quán)，請(qǐng)勿用于商業(yè)用途，會(huì)員不得以任何形式發(fā)布、傳播、復(fù)制、轉(zhuǎn)售該素材，否則一律封號(hào)處理。
4. 本平臺(tái)織夢(mèng)模板僅展示和個(gè)人非盈利用途，織夢(mèng)系統(tǒng)商業(yè)用途請(qǐng)預(yù)先授權(quán)。

查看演示下載資源

80 6303 7