html5圆圈随机效果,HTML5 canvas圆形气泡动画背景插件

circleMagic.js是一款HTML5 canvas圆形气泡动画背景jquery插件。通过circleMagic.js你可以为banner或任何容器制作出随机动画的圆形气泡背景动画效果。

安装

可以通过bower来安装circleMagic.js插件。

bower install circleMagic --save

使用方法

在页面中引入circleMagic.js文件。

HTML结构

如果要为网站的顶部banner制作气泡背景动画效果，例如使用一个header元素来作为容器。

初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来初始化circleMagic.js圆形气泡动画背景插件。

$('.header').circleMagic({

elem: '.header',

radius: 35,

densety: .3,

color: 'rgba(255,255,255, .4)',

//color: 'random',

clearOffset: .3

});

配置参数

circleMagic.js圆形气泡动画背景插件的可用配置参数有：

参数

描述

elem

要应用圆形气泡动画背景效果的容器元素。

radius

定义圆形的半径。

densety

指定屏幕中显示圆形的密度。

color

圆形气泡的颜色。可以是CSS颜色值或关键字random。

clearOffset

定义消失的圆形气泡的数量。