查看 Demo 源码

加载中…

WebGL 流体色彩表盘

整页效果WebGLShader流体噪声渐变全屏背景

AI 改造

亮点解析

四色循环流体 — 1:1 圆角矩形容器内填充动态渐变流体，颜色随时间平滑循环（海洋蓝→日落橙→极光紫→薄荷绿），噪声域扭曲 fbm 模拟颜料在液体中扩散
玻璃质感文字标识 — 中心 "SPECTRA" 文字用半透明玻璃质感 HTML 覆盖层实现（rgba 背景 + 背景模糊），随流体反射光泽
鼠标驱动物理感 — 悬浮时流体加速流动，点击产生径向波纹扩散并约 1 秒衰减；深灰渐变背景 + 容器柔和外阴影与内发光

适用场景

品牌官网首屏
产品发布页背景
数字艺术展示页

来源

https://mp.weixin.qq.com/s/Fp2FFXldbVR2o2lJHr65HA