html5气泡背景动画插件bubbly-bg.js

来源:https://www.sucaihuo.com/js/3137.html 2017-10-15 17:40浏览(1118) 收藏

bubbly-bg.js插件与html5 canvas实现的气泡背景动画特效,点击图片来切换展示各种动态气泡背景效果。
html5气泡背景动画插件bubbly-bg.js
分类:html5 > canvas 难易:初级
查看演示 下载资源 下载积分: 20 积分

js代码

<script type="text/javascript" src="js/bubbly-bg.js"></script>
<script type="text/javascript">
	bubbly();
	let configs = [
		{},
		{
			colorStart: "#111",
			colorStop: "#422",
			bubbleFunc: () => `hsla(0, 100%, 50%, ${Math.random() * 0.25})`
		},
		{
			colorStart: "#4c004c",
			colorStop: "#1a001a",
			bubbleFunc: () => `hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.25})`
		},
		{
			colorStart: "#fff4e6",
			colorStop: "#ffe9e4",
			blur: 1,
			compose: "source-over",
			bubbleFunc: () => `hsla(${Math.random() * 50}, 100%, 50%, .3)`
		}
	];
	document.addEventListener("click", function (e) {
		if (e.target.hasAttribute("data-config-nr")) {
			document.body.removeChild(document.querySelector("canvas"));
			bubbly(configs[e.target.getAttribute("data-config-nr")]);
		}
	});
</script>
标签: 气泡背景动画
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2