跳到主要内容

独立动效 / PARTICLE

图片粒子

将图标与轮廓采样成粒子,给品牌标志一个有呼吸感的出场。

图片粒子动态画布的静态封面

当前使用静态预览。你可以自行开启动态效果。

预览参数

参数只影响本次预览,不会保存到资源库。手机自动降低粒子数量。

关于这个资源

从轮廓到微光

演示将一枚公开示例星形图标采样成粒子,保留图像色彩。它适合简洁 Logo、产品符号与高对比轮廓,细节复杂的照片未必容易辨认。

准备图片

建议使用透明背景、清晰轮廓的素材。CMS 中的示例图必须允许跨域采样;拥有素材使用权后再上传,避免依赖无法读取的第三方链接。

性能与降级

图像采样在详情加载后进行。图像无法读取或 WebGL 不可用时保留静态封面,不影响文字说明与 CTA。

你的建站起点

为一个 图片粒子 风格的产品官网创建粒子 Hero。使用深色 #03090e 背景、#a9dbff 蓝色与 #ffa66b 金色点缀,模式 image,默认约 12000 粒子,速度 1,粒子大小 1.3,光晕 0.8。使用 https://fsu.creght.com/site/2066727200882692096/1788850063911__particle_sample.svg 作为可跨域采样的示例图,保留图片颜色。 在画布之外添加品牌标题、产品价值说明与明确 CTA,再扩展导航、功能介绍、案例和联系区。手机端降低粒子数量;支持减少动效、手动暂停、离屏暂停与 WebGL 失败时静态降级。此提示词用于描述效果,不是模板源码导入;请根据实际结果继续调整。

提示词保留在页面中,可手动选择复制。预览中的临时调参不会自动改写这里的提示词。

继续探索

查看全部
文字粒子动态画布的静态封面预览效果

文字粒子

独立动效

把品牌名或一句宣言变成发光粒子,适合新品发布与创意作品集。

Render diagnostics