颜色选择器
选择并提取 HEX、RGB、HSL 颜色值
10 种纯 CSS 加载动画,调大小/颜色/速度并复制代码
十种纯 CSS 加载动画,尺寸、颜色、速度都可调。预览用的就是下面输出框里那份 CSS,所见即所得。
十种纯 CSS 加载动画(spinner / dots / pulse / bars / grid / orbit / flip / ripple / wave / progress),每种输出「一段 `@keyframes` + 一个类规则」,不带 SVG、GIF 或 JS 依赖。
关键帧名带 `bz-` 前缀(如 `bz-spin`):直接贴进已有项目也不会和你的动画撞名;尺寸、颜色、速度三个参数改完即时反映到代码里。
预览用的是**同一份 CSS**(不是另画的示意图),所以预览什么样、贴出去就是什么样;轨道的半透明色由主色自动生成,换颜色时对比度不用手调。
选动画
十种形状各有自己的 @keyframes,切换即换代码。
调尺寸、颜色、速度
尺寸决定边框粗细(自动取 1/8),速度是动画时长(毫秒)。
复制 CSS 并给元素加类名
贴进样式表后,把对应的类名(如 `bz-spinner`)加到要显示动画的元素上。
能,直接改复制出来的那一行:它写的是标准 CSS(例如 `animation: bz-spin 900ms linear infinite;`),把 `linear` 换成 `ease-in-out`、给 `infinite` 前加 `1`、或在前面插 `animation-delay: 200ms;` 都随意——它就是你自己的样式表。
体积与清晰度:每个动画只有十几行 CSS(约 0.3 KB),不请求任何图片,缩放与高分屏都不糊;GIF 动辄几十上百 KB 且只有 256 色。代价是 CSS 只做得出几何类动画(旋转、缩放、位移、遮罩),画不出插画式的 complex loading 图。
选择并提取 HEX、RGB、HSL 颜色值
检查前背景色对比是否符合的可访问性标准
可视化创建漂亮的 CSS 线性或径向渐变
可视化调节并复制 box-shadow 代码
各领域物理单位的精准换算
在 B, KB, MB, GB, TB 间进行转换
可视化调节四角圆角并复制 border-radius 代码
拖动顶点调整形状,复制 clip-path: polygon() 代码