color4bg
使用 JavaScript 和 WebGL 生成炫酷多彩的背景图像,为您的网页带来动态、抽象且视觉震撼的效果。
Github地址
https://github.com/winterx/color4bg.js
在线体验
https://www.color4bg.com/zh-hans/
特点:
•自定义颜色:您可以指定最多6种颜色的数组,用于生成背景图案。
•动态动画:生成的背景可以设置为循环播放,创造出令人着迷的、流畅的动画效果。
•一致的图案:通过提供种子值,可以确保每次都生成相同的图案,便于集成到您的网页设计中。
•易于集成:只需导入 **Bg 类并使用您希望的设置创建一个实例。
使用方法:
1. 导入 AbstractShapeBg 模块:
import { AbstractShapeBg } from "../build/jsm/AbstractShapeBg.module.js"
1. 使用您希望的设置创建 AestheticFluidBg(或任何其他 Bg 类型)的实例:
let colorbg = new AestheticFluidBg({ dom: "box", colors: ["#D1ADFF", "#98D69B", "#FAE390", "#FFACD8", "#7DD5FF", "#D1ADFF"], seed: 1000, loop: true })
参数说明:
•dom: 要附加背景的 DOM 元素。
•colors: 一个最多包含6个十六进制颜色值的数组。
•seed: 用于生成一致图案的数值。
•loop: 一个布尔值,决定背景是否应该循环播放。
领取专属 10元无门槛券
私享最新 技术干货