小时候的游戏机上的游戏人物都是用像素画，那时候就对像素情有独钟。前两年上映的像素大战也勾起许多儿时的回忆。
绘制像素画前，需要做一些准备，可以准备一张有许多小方格纸作为画布，来绘制像素画。
今天我们就用 CSS 来制作像素画，很简单。
首先在熟练掌握 CSS3 的基础上，还需要掌握 SASS 这个 CSS 糖果的语法。
先从简单的图形开始，先画一个心形。
html文件很简单，我们都是对 pixelized-heart div 上进行绘制像素画
定义一个 map 名称为 $coloors ，每个字母对应一种颜色值。这些颜色值用于绘制像素图的颜料。
$size 来定义每个像素的大小，也就是每个小方格的大小，下面用 map
$pixel-art 做的二维数组，可以将他想象为纸上的一个个的小方格，没有小方格都有坐标和值，值为 r 表示红色（见 $colors) 通过行和列代表他的坐标。
我们选择中所有 r 大家已经看到心形了吧，接下来看我们是如何将这个二维数组呈现到屏幕上的呢。
所有的玄机都在这个 pixelize 方法，他主要是读取矩阵值，将他转换为 CSS 一个一个的阴影来呈现画面的。
下面来个复制的，画一朵小花。
网友评论