Connect_logo_6.png 退出
前端視頻教程 小程序 眾籌源碼 python 商城源碼 商城模板 響應式模板 中文模板 手機模板 企業源碼
充值

HTML5 Canvas彩色圓點粒子飄動動畫特效

作者/代碼整理:  (轉載請附加本文地址,帶有“懶人原生”字樣的謝絕轉載) 發布日期:2019-06-17
HTML5 Canvas彩色圓點粒子飄動動畫特效,粒子元素放大縮小隨機飄動網頁背景動畫特效,下方有詳細的參數設置注釋說明。


js代碼

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

	//type:img 生成點為圖片,圖片比例1:1
	//type: "img",
	//生成點圖片列表,隨機刷新圖片
	//imgUrl: ["圖片路徑", "圖片路徑",....],
	//生成點圖片單值,固定圖片刷新
	//imgUrl: "圖片路徑",
	//動畫類型:
	//animation_type: 0(默認動畫,隨機方位,隨機方向)
	//animation_type: 1(向左運動)
	//animation_type: 2(向右運動)
	//animation_type: 3(向下運動)
	//animation_type: 4(向上運動)
	animation_type: 0,
	//生成點生成速率,數值越大,點的生成越慢
	speed: 10,
})
</script>

河北十一选五走势图一定牛