首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用 JavaScript 和 WebGL 生成炫酷多彩的背景图像,为您的网页带来动态、抽象且视觉震撼的效果。

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: 一个布尔值,决定背景是否应该循环播放。

  • 发表于:
  • 原文链接https://page.om.qq.com/page/OWgBKqdW0MZG8xBy2levAWFA0
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券