UI组件后端【免费下载链接】dicebearDiceBear is an avatar library for designers and developers. 项目地址https://gitcode.com/gh_mirrors/di/dicebear点击查看免费下载导读Pixelbot 是 DiceBear 开源头像库中的一款“角色类Characters”像素机器人风格由小方块像素在深色网格上拼出带辉光效果的机器人面孔。本文以仓库中的 Pixelbot 样式页 为骨架结合预设配置、核心选项文档与各语言核心库的实现完整讲解如何用 HTTP API、JavaScript/PHP/Python/Rust/Go/Dart/C# 各语言库与 CLI 生成 Pixelbot 头像逐一拆解仓库内置的 11 个官方预设并说明其自带动画的开启方式。Pixelbot 是什么在 DiceBear 文档中Pixelbot 样式页的核心描述只有一句话Glowing robot faces drawn from small pixel blocks on a dark grid. 由深色网格上的小像素块绘制而成的发光机器人面孔。从样式分类配置 styleCategories.ts 可以看到pixelbot被归类到Characters角色大类与bottts、voxel-bot、pixel-art等风格并列。它与同仓库的voxel-art体素立体风格、pixel-art像素头像是三个不同路线的像素类风格Pixelbot 的视觉辨识度集中在“发光glow”与“深色网格背景”上。根据仓库 CHANGELOG.md 的记录pixelbot随dicebear/styles的10.3.0版本首次引入属于该版本新增的十三个风格之一blobs、clay、constellation、critters、landscape、loops、moods、pixelbot、planets、sprouts、squircles、waves、weave。在文档站上每个样式页都会展示一排 8 个示例 seed其首字母拼成 “DICEBEAR”。Pixelbot 的预览 seed 记录在 previewRowSeeds.tspixelbot: [Drew, Izumi, Chiara, Ethan, Blake, Elias, Axel, Ronan],你可以直接把这些 seed 作为占位符输入使用例如seedDrew或seedEthan以快速预览同一风格下不同随机结果。如何生成 Pixelbot 头像DiceBear 的所有官方样式都遵循同一套调用方式pixelbot就是代码中的一个样式名。文档站的样式页通过 SiteStyleUsage.vue 为每种语言生成同一套代码片段这些片段统一维护在 usageSnippets.ts 中保证“同一种写法任何入口渲染结果一致”。方式一HTTP API零安装HTTP API 是最快的接入方式——一个img标签即可无需任何安装!-- any img tag, no install -- img srchttps://api.dicebear.com/11.x/pixelbot/svg?seedFelix altavatar /URL 规则为https://api.dicebear.com/11.x/styleName/svg见 HTTP API 文档多词风格名使用小写连字符形式。所有选项都可以作为 URL 查询参数直接追加例如?seeduser-8f3a2c可让同一个用户每次都看到相同的头像适合用作默认头像。方式二JavaScript 库// npm install dicebear/core dicebear/styles --save import { Style, Avatar } from dicebear/core; import definition from dicebear/styles/pixelbot.json with { type: json }; const style new Style(definition); const avatar new Avatar(style, { seed: Felix }); const svg avatar.toString();方式三CLI# npm install --global dicebear dicebear create pixelbot --seed Felix方式四其余官方核心库DiceBear 为同一套样式提供多语言核心调用形态一致代码取自仓库 usageSnippets.ts语言安装命令核心调用PHPcomposer require dicebear/core dicebear/stylesStyle::fromJson(...)new Avatar($style, [seed Felix])Pythonpip install dicebear-core dicebear-stylesStyle.from_json(...)Avatar(style, {seed: Felix})Rustcargo add dicebear-core serde_jsoncargo add dicebear-styles --features pixelbotAvatar::new(style, json!({ seed: Felix }))Gogo get github.com/dicebear/dicebear-go/v11github.com/dicebear/styles/v11dicebear.NewAvatar(style, map[string]any{seed: Felix})Dartdart pub add dicebear_core dicebear_stylesAvatar(style, {seed: Felix})C#dotnet add package DiceBear.CoreDiceBear.Stylesnew Avatar(style, new JsonObject { [seed] Felix })需要说明以上各语言包的语法与入口以当前仓库 usageSnippets.ts 生成的内容为准各语言对应核心源码位于仓库 src 目录下例如 PHP 核心、Rust 核心 与 Go 核心。Pixelbot 的官方预设Presets每个风格页都带有“Presets”区块。仓库中 Pixelbot 的预设完整定义在 pixelbot.json共11 个官方预设。预设的本质就是一组普通渲染选项——你可以直接复制其代码或打开 Playground 继续调参预设未指定的选项会继续随 seed 随机变化。Terminal终端Green pixels on near-black. 绿像素配近黑底。最原始的“点阵”形态单一荧光绿、单一深色底色全图无第二种颜色。{ backgroundColor: [0a0f0a], glowColor: [4ade80] }Amber琥珀The warm counterpart to Terminal. 暖色版的 Terminal。同一套想法换一种荧光色——琥珀色配棕黑底在列表里比绿色更显暖。{ backgroundColor: [120c05], glowColor: [ffb020] }Greyscale灰度White pixels, no hue at all. 纯白像素完全无色相。适用于“颜色已有其他语义”的界面。因为眼睛与嘴巴的形状本身足以区分头像去色后结构信息不丢失。{ backgroundColor: [141416], glowColor: [f4f4f5, d4d4d8, a1a1aa] }Duotone双色调One cyan for every avatar. 全套头像共用一种青色。固定一个辉光色让眼睛与嘴巴的形状成为头像之间唯一的差异。{ backgroundColor: [061626], glowColor: [22d3ee] }Muted低饱和Dusty pixels on a slate ground. 石板灰底上的灰扑扑像素。风格自带的九个亮色在侧边栏里“太吵”这六个低饱和色在深色底上既可读又不抢眼。{ backgroundColor: [1b1d22], glowColor: [9aa88f, b0a48c, 8fa3ad, a894a3, b8a06f, 8d9bb5] }Electric电光Six colors at full saturation. 六个全饱和色。超越风格默认配色的激进方案在纯黑底上这些颜色读起来像真实光源而非颜料。{ backgroundColor: [000000], glowColor: [ff2e88, 00e5ff, 7cff00, ffe600, ff6a00, b400ff] }Cool / Warm冷暖色系冷色只保留蓝、青、紫暖色只保留红、橙、金。冷暖两套色相互补两拨头像仅凭色温即可区分{ backgroundColor: [0b1220], glowColor: [7dd3fc, 5eead4, a5b4fc, c4b5fd, 67e8f9] }{ backgroundColor: [1a0d06], glowColor: [fdba74, fcd34d, fca5a5, fb923c, f9a8d4] }Sunrise日出渐变A gradient behind the matrix. 矩阵背后的渐变。演示了背景渐变选项两色、线性填充、固定角度。两个色标都保持深色因为发光的像素需要深色衬托。{ backgroundColor: [1e1b4b, 3b0764], backgroundColorFill: linear, backgroundColorAngle: 45, glowColor: [fde68a, f9a8d4, c4b5fd] }Close Up特写Fewer grid cells, larger pixels. 更少的网格、更大的像素。只改scale脸占据更宽的网格用“放大”换取“尺寸”在 32 像素缩略图场景下是划算的取舍。{ scale: 1.3 }Animated动画Turns the styles built-in animation on. 开启风格内置动画。动画默认关闭animation: true开启全部smileAnimation: true只播微笑这一个动画animationSpeed控制节奏。动画遵循prefers-reduced-motion系统“减少动态效果”设置。{ animation: true }深入理解选项为什么这些配置有效上述预设中的backgroundColor、glowColor、scale、backgroundColorFill、backgroundColorAngle并非 Pixelbot 独有而是 DiceBear 所有风格共用的核心选项体系定义见 Core options 文档通用选项seed确定性生成、flip、rotate−360360、scale010、borderRadius05050 为圆形、size14096PNG/JPG 栅格化时生效、translateX/translateY、idRandomization、title、tags等。其中[min, max]类型可传二元组PRNG 会在区间内采样从而让同一组配置产生不同结果。背景选项backgroundColor、backgroundColorFillsolid/linear/radial、backgroundColorFillStops渐变停靠点最小 2、backgroundColorAngle、backgroundColorOrder。文档明确说明每个风格都接受背景选项即使其定义中未声明background颜色组——这正是 Sunrise 预设能生效的前提。动态颜色选项{color}Color、{color}ColorFill、{color}ColorFillStops、{color}ColorAngle、{color}ColorOrder。glowColor即“辉光颜色组”是 Pixelbot 区别于其他角色风的核心颜色通道预设中传入的多个色值默认会被打乱ColorOrder: random若想按给定顺序使用可设为fixed。组件选项{component}Variant与{component}Probability。文档特别说明组件的旋转/位移/缩放由组件定义在渲染时采样不是用户选项不存在{component}Rotate等键。所有选项同时适用于 HTTP API 的 URL 查询参数因此上面任何一个预设都可以直接拼成 URL 使用例如https://api.dicebear.com/11.x/pixelbot/svg?backgroundColor0a0f0aglowColor4ade80seedFelixPixelbot 的动画能力pixelbot是支持动画的风格之一。根据 CHANGELOG.md 的说明该版本为包括pixelbot在内的多个新风格加入了**可选opt-in**动画组件动画默认关闭只有设置了animationVariant或tags渲染选项或显式传入animation: true才会播放。动画选项同样来自 Core options 文档animation布尔值默认false控制风格内置动画的总开关*Animation按名称单独开关某个动画如smileAnimation: true优先级高于全局animationanimationSpeed播放速度倍率默认1范围 0.110animationDelay起始偏移秒数−36003600传范围值时每个 seed 从自己的时刻开始避免一屏头像同步运动。动画以纯 CSS 形式内嵌于 SVG可在普通img标签中播放并尊重prefers-reduced-motion见 动画头像总览。周边资源与延伸阅读预览与分类Pixelbot 位于 Characters 分类styleCategories.ts更多预览 seed 见 previewRowSeeds.ts。样式页结构每个样式页由 SiteStylePage.vue 统一渲染包含 Usage、Presets、Options、Details 等区块样式定义 JSON 按需动态加载style.ts。编辑器pixelbot已纳入 DiceBear 官方编辑器styles.ts可在其中实时调节选项。样式定义文件各语言核心读取的是pixelbot.json定义JS 侧见dicebear/styles/pixelbot.json可在文档站 Details 区块下载后导入 Figma 插件DiceBear Studio进行二次创作。参考文档HTTP API 用法、核心选项表、全部样式总览、动画头像说明。小结Pixelbot 是 DiceBear 中辨识度很高的像素机器人风格深色网格 发光像素 可选的 CSS 动画。接入方式与其它风格完全一致HTTP API / 多语言库 / CLI仓库内置的 11 个预设覆盖了从单色终端风到电光六色、从渐变背景到特写放大的常用调参路径。如果你想在自己的产品中快速获得一套“科技感”用户头像直接复制 Terminal 或 Animated 预设替换 seed 即可投入使用。赞分享UI组件后端【免费下载链接】dicebearDiceBear is an avatar library for designers and developers. 项目地址https://gitcode.com/gh_mirrors/di/dicebear点击查看免费下载相关推荐DiceBear Clay 头像样式预设Presets完全指南从现成配色到自定义微调DiceBear Clay 头像样式预设Presets完全指南从现成配色到自定义微调 本文基于 DiceBear 文档仓库中的 Clay 样式预设页 aUI组件后端DiceBear Blobs 头像风格预设Presets完整指南配色方案、动画开关与实战用法DiceBear Blobs 头像风格预设Presets完整指南配色方案、动画开关与实战用法 Blobs 是 DiceBear 提供的一种抽象头像风格用UI组件后端DiceBear Voxel Bot 头像样式实战用立方体小机器人生成与定制个性化头像DiceBear Voxel Bot 头像样式实战用立方体小机器人生成与定制个性化头像 Voxel Bot 是 DiceBear 头像库中一款立方体风格的小型UI组件后端上一篇【亲测免费】 推荐开源项目ROS-Face - 革新面部表情控制体验下一篇终极指南如何使用graceful-fs解决Node.js文件系统操作难题创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
