当前位置：首页 > 网页特效 > 背景

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

分类：背景日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
<script src="path/to/background.js"></script>
```
#####  HTML结构
使用canvas元素来创建背景。

```html
<canvas id="background"></canvas>                  
```
#####  CSS样式
如果要制作全屏效果，可以使用下面的css代码将canvas元素固定在视口中。

```html
#background {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -100;
}             
```     
#####  配置参数
background.js创建可以修改的配置参数如下：

```html
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
    }
  };                  
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果