HTML5 canvas圆形泡泡动画背景特效

background.js是一款HTML5 canvas梦幻圆形泡泡动画背景特效。通过background.js插件,你可以轻

松的制作出带渐变效果的气泡动画背景效果,并且背景颜色能在4种颜色间平滑过渡转换。


在线预览 下载

background.js插件的特点还有:

  • 支持4种渐变颜色。
  • 实现梦幻泡泡效果。
  • 动画平滑过渡效果。
  • 检测移动设备并尝试优化资源。
  • 纯JavaScript制作,没有任何依赖。

使用方法

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

javascript 复制代码
<script src="path/to/background.js"></script>

HTML结构

使用<canvas>元素来创建背景。

bash 复制代码
<canvas id="background"></canvas>         

CSS样式

如果要制作全屏效果,可以使用下面的css代码将元素固定在视口中。

bash 复制代码
#background {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -100;
}  

配置参数

background.js创建可以修改的配置参数如下:

bash 复制代码
var options =
  {
    resolution: 1,
    gradient:
    {
      resolution: 4,
      smallRadius: 0,
      hue:
      {
        min: 0,
        max: 360
      },
      saturation:
      {
        min: 40,
        max: 80
      },
      lightness:
      {
        min: 25,

        max: 35
      }
    },
    bokeh:
    {
      count: 30,
      size:
      {
        min: 0.1,
        max: 0.3
      },
      alpha:
      {
        min: 0.05,
        max: 0.4
      },
      jitter:
      {
        x: 0.3,
        y: 0.3
      }
    },
    speed:
    {
      min: 0.0001,

      max: 0.001
    },
    debug:
    {
      strokeBokeh: false,
      showFps: false
    }
  };   
相关推荐
musk12122 分钟前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼1 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿1 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5552 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录2 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css