Pixel Art to CSS —— 基于 React 的像素画动画与绘制 Web 应用
pixel-art-react（对外名称 Pixel Art to CSS）是一个在线像素画编辑器，利用 CSS 的 box-shadow 与 keyframes 属性生成可直接用于网站的 CSS 代码，并支持将作品导出为静态图片、动态 GIF 或类精灵图格式。项目采用 React、Redux、ImmutableJS、PostCSS 技术栈，遵循 MIT 许可证，仓库当前处于因重构与技术升级而暂停接收新 PR 和 Issue 的临时停滞状态。
社区作者 · zZz
它解决什么问题
项目用途
Pixel Art to CSS 是一个在线编辑器，帮助用户完成“用 CSS 创作像素画”这一任务。项目说明中指出：你可以在 CSS 中使用 box-shadow 与 keyframes 两个属性的组合来制作像素画，编辑器会生成可直接放入网站的 CSS 代码。
除生成 CSS 外，还可以把作品下载为多种格式：
- 静态图片
- 动态 GIF
- 类精灵图（sprite like image）
功能特点
项目定位为“以简单实现直观”的工具，但具备较丰富的功能：
- 自定义调色板
- 在时间轴上前后回退（go back and forth in time）
- 修改动画设置
- 保存或加载项目
- 其他功能
示例项目
默认情况下，在 LOAD 区域中可以找到示例项目；项目说明给出了在线访问地址 pixelartcss，并可通过提交对应代码直接导入该示例。来源中检测到的教程配图（配图 1）为项目配图，正文未对其内容单独说明。
技术栈
- React：用于构建 UI 的库
- Redux：实现类 Flux 架构
- ImmutableJS：保持数据不可变，以尽量避免副作用
- PostCSS：处理应用 CSS
贡献与当前状态
⚠️ 来源明确提示：由于重构与技术升级，该仓库目前处于临时停滞状态，作者当前不接受新的 Pull Request 或 Issue。
作者同时给出了希望改进项目的途径与 PR 检查清单：
- 可以通过创建 GitHub issue 反馈问题或改进建议
- [x] PR 需修复问题或新增功能，而不只是外观或语法糖层面的改动
- [x] 最好提前开一个 issue
- [x] PR 应提交到 develop 分支
- [x] PR 应带有说明或关联某个 issue
许可证
MIT Copyright © 2016 Javier Valencia Romero (@jvalen)
— 本文由 AI 根据公开来源辅助整理，命令、版本与许可证请在使用前到原始页面复核。
安装 / 开始使用
准备环境
来源未给出 Node.js/npm 的具体版本要求，使用前需自行准备可运行 npm 脚本的环境（待核验具体版本）。
安装依赖
npm install本地开发
npm run development部署 / 生产构建
创建生产构建：
npm run deploy代码检查与格式化
项目使用 ESlint、Stylelint、Prettier 保持代码库健康；每次提交时都会执行 linter，并在需要时格式化已暂存的文件。
如需单独检查，可执行以下脚本：
npm run lint
npm run csslint
npm run format测试
测试平台为 Jest：
npm run test首次运行与常见问题
- 安装完成后先执行
npm run development启动开发流程，再做生产构建与部署。 - 若提交被 linter 拦截，可按需运行
npm run lint、npm run csslint、npm run format单独排查与格式化。 - 提交 PR 之前请注意：作者当前不接受新的 PR 或 Issue；若确定要提交，应针对 develop 分支，并附带说明或关联 issue。
来源教程配图
