只用 CSS 就能做到的像素画/像素动画
内容提要
本文介绍仅用 CSS 制作像素画与像素动画的方法：利用 box-shadow 的偏移量和颜色逐格绘制像素点，配合伪元素定位；因手写值过多（5×5 需 25 个，16×16 需 256 个）难以维护，推荐用 Sass mixin 根据矩阵和颜色列表自动生成样式；动画则通过 CSS animation 修改 box-shadow 和元素位置实现跳跃等效果。
延伸解读
box-shadow 绘制像素画的原理与限制
文章利用 box-shadow 的偏移和颜色属性，在伪元素上生成多个阴影点来模拟像素。每个阴影点对应一个像素，通过调整偏移量定位。但这种方法需要为每个像素手动编写一个阴影值，5x5 像素画需 25 个值，16x16 则需 256 个，导致代码冗长且难以维护。此外，阴影点不能单独控制，修改整体图案需重写所有值。
Sass mixin 提升可维护性
针对手动编写 box-shadow 的痛点，文章推荐使用 Sass mixin 自动生成样式。通过传入像素矩阵、像素大小和颜色列表，mixin 遍历矩阵，跳过透明像素（0），为每个有色像素生成对应的 box-shadow 值。这样，像素画以矩阵形式定义，修改图案只需调整矩阵，大大提高了代码的可读性和可维护性。
CSS 动画实现像素动画
文章通过修改 box-shadow 和元素位置来制作像素动画。例如，马里奥的跳跃动画使用两个关键帧：一个定义普通状态的像素画，另一个定义跳跃状态的像素画，同时通过 transform: translateY 实现上下移动。动画使用 steps 或百分比精确控制帧切换，从而模拟出跳跃效果。
Q&A
如何用纯 CSS 绘制像素画？
利用 box-shadow 属性，通过设置多个阴影的偏移量和颜色来绘制像素点。通常将伪元素（如 ::before）设为透明，并用 box-shadow 逐格绘制像素，同时用 position: absolute 调整伪元素位置，使左上角成为原点。
为什么手写 box-shadow 绘制像素画难以维护？
因为每个像素点都需要一个 box-shadow 值，5x5 的像素画需要写 25 个值，16x16 则多达 256 个值，代码冗长且难以修改。
如何用 Sass 生成可维护的像素画样式？
可以编写一个 Sass mixin（如 pixelize），接收像素矩阵、像素大小和颜色列表作为参数。矩阵中用数字 0 表示透明，1~n 对应颜色列表中的颜色。mixin 通过循环遍历矩阵，自动生成 box-shadow 属性值。
如何用 CSS 制作像素动画？
使用 CSS animation，通过 @keyframes 修改 box-shadow 来切换不同状态的像素画，同时结合 transform: translateY 改变元素位置，实现跳跃等动画效果。
box-shadow 属性中各个参数分别代表什么？
box-shadow 的基本写法为 offset-x offset-y blur-radius spread-radius color inset。offset-x 和 offset-y 指定阴影偏移位置，blur-radius 指定模糊半径，spread-radius 指定模糊范围的扩大与缩小，color 指定阴影颜色，inset 关键字使阴影显示在元素内部。
有没有工具可以自动生成 CSS 像素画？
有，可以使用 CSS 像素画生成器（如 CSS ドット絵ジェネレータ）来简化生成过程。
