Bubble.js是一个轻量级但完全可自定义的jQuery动画背景插件，它可以使气泡或自定义图像在指定的容器中无缝浮动和移动。

如何使用它:

1.下载并加载jquery.bubble.js插件。

<script src="/path/to/cdn/jquery.min.js"></script>
<link rel="stylesheet" href="/path/to/default.css">
<script src="/path/to/jquery.bubble.js"></script>

2.创建一个容器来容纳动画背景。

<div class="bubble"></div>

/* Example CSS */
.bubble{
  width: 100%;
  height: 100vh;
}

3.初始化插件并定义要在后台设置动画的图像数组。

$('body').bubble({
  img:[
    './img/pink.png', 
    './img/yellow.png', 
    './img/green.png' 
  ], 
  // custom shadows
  shadowColor:[
    '#8bcecb', 
    '#f2a2b9', 
    '#f4b6d1', 
    '#ca98c3', 
    '#fff231', 
    '#4ab7d0' 
  ],
})

4.启用/禁用背景图像和预构建的气泡。

$('body').bubble({
  imgs: false, 
  bubbles: false,
})

5.为画布创建一个彩色渐变背景。

$('body').bubble({
  background: {
    0: '#000',
    1: '#FFF' 
  }, 
})

6.更多配置。

$('body').bubble({
  namespace: 'bubble_', 
  animate: true, // enable animation
  imgSize: {
    min:30, 
    max:80 
  }, 
  shadowBlur: 1, 
  granularity: 0.01, 
  globalCompositeOperationBackground: 'source-over', 
  globalCompositeOperationObject: 'source-over', 
  bubbleFunc: false, 
  radiusFunc: false, 
  angleFunc: false, 
  velocityFunc: false, 
};)

更新日志：

2023-04-02

• 性能改进

预览截图

令人惊叹 动画背景 jQuery插件 Bubble.js