找不到网站背景时，这几个炫酷的不妨一试

前言

有时候我们做一个普普通通的后台网站，犯不上惊动UI，就想弄个凑合过得去的登录背景，当然，最好炫酷一点的。

1. WebGL流体模拟

官方试玩链接

Github链接

不过，官方的这个不支持ES import，仅支持鼠标点击触发特效，不支持设置背景图片，透明也不是真的透明。

逛了一圈issue区，反映hover触发和背景图片需求的人挺多的，于是弄了一个开箱即用的版本出来，解决以上所有问题：

特性

• √ ES模块化
• √ 可配置：流体密度、速度扩散范围、压力、飞溅半径、光影效果等属性（官方自带）
• √ 可配置是否在初始化时渲染随机泼溅
• √ 零依赖
• √ 默认hover触发特效，也可设置为click
• √ 自定义背景图片

快速上手

$ yarn add webgl-fluid

import WebglFluid from 'webgl-fluid'

WebglFluid(document.querySelector('canvas'))

修改默认配置

WebglFluid(document.querySelector('canvas'), {
  IMMEDIATE: true, // 是否在初始化时渲染随机泼溅
  TRIGGER: 'hover', // 可改为'click'
  SIM_RESOLUTION: 128,
  DYE_RESOLUTION: 1024,
  CAPTURE_RESOLUTION: 512,
  DENSITY_DISSIPATION: 1,
  VELOCITY_DISSIPATION: 0.2,
  PRESSURE: 0.8,
  PRESSURE_ITERATIONS: 20,
  CURL: 30,
  SPLAT_RADIUS: 0.25,
  SPLAT_FORCE: 6000,
  SHADING: true,
  COLORFUL: true,
  COLOR_UPDATE_SPEED: 10,
  PAUSED: false,
  BACK_COLOR: { r: 0, g: 0, b: 0 },
  TRANSPARENT: false,
  BLOOM: true,
  BLOOM_ITERATIONS: 8,
  BLOOM_RESOLUTION: 256,
  BLOOM_INTENSITY: 0.8,
  BLOOM_THRESHOLD: 0.6,
  BLOOM_SOFT_KNEE: 0.7,
  SUNRAYS: true,
  SUNRAYS_RESOLUTION: 196,
  SUNRAYS_WEIGHT: 1.0,
})

在Vue中使用

<template>
  <canvas ref="canvas"/>
</template>

<script>
import WebglFluid from 'webgl-fluid'

export default {
  mounted () {
    WebglFluid(this.$refs.canvas)
  }
}
</script>

<style>
canvas {
  width: 100vw;
  height: 100vh;
}
</style>

自定义背景图片

css

canvas {
  width: 100vw;
  height: 100vh;
  background-image: url("back.png");
  background-size: 100% 100%;
}

js

WebglFluid(document.querySelector('canvas'), {
  TRANSPARENT: true
})

2. 随机微粒（可交互）

Github链接

在Vue中使用

// particles.json在官方README.md中有
import particlesJSConfig from '../../assets/particles.json'

export default {
  mounted() {
  	  require('particles.js')
      window.particlesJS('particles-js', particlesJSConfig, () => {
      console.log('callback - particles.js config loaded')
    })
  }
}

3. 随机三角

Github链接（GPL证书）

可视化调参导出图片