“假像素风”？其实就是那些满满都是纯色格子的画呗。但别看它简单，在美工啊、建筑设计啊、游戏之类的地方可是能用得到！接下来我就教你怎么用CSS做出这种炫酷效果，希望能帮到你们哟~
了解像素风
像素风，其实就是以前那种老游戏里用的那种小方块，那时候电脑硬件落后，只能这样子设计。因为这些大小统一的小点点可以创造出既简单又让人怀念的感觉。现在可不是这样了，像素风不仅在游戏圈子里广受欢迎，而且越发热潮，还有满满的美感和回忆。不信你看，到处都是这种风格。
原图与处理思路
咱们来画颗心！开始想到要用canvas切图做图案，后来觉得没啥独特。或许可以用CSS搞定
思路一：通过Canvas切割和填充
开始我打算用画布切割，然后分开上色的办法。虽方便快捷，不过色彩效果不佳！
思路二：利用CSS实现
你可以试着在CSS里加个大半径高斯模糊滤镜试试看~就像把图片分成许多小块，然后对每一块都做高斯模糊处理，最后看看哪部分的效果最好就能展现出来。
关键步骤
想要Div变像素画？关键就是每个div要像小格子一样显示图片部分，按我说的来，给每’.mask-item’加几行代码，让图片从左上角开始一层层往左下或右下移就对了！
.mask-group {
width: 128px;
height: 128px;
display: grid;
grid-template-columns: repeat(8,1fr);
grid-template-rows: repeat(8,1fr);
}
const el = document.querySelector('.mask-group')
for(let i = 0; i< 64; i++) {
const itemEl = document.createElement('div')
itemEl.className = 'mask-item'
el.appendChild(itemEl)
}
}
调整效果
搞定了上边的步骤，你的图片就变得有点朦胧了。别急，还有后续操作！咱们接下来要在这个div添加些透明度，再加个 Gaussian blur 过滤器，效果绝对更赞！但是，设置 Gauss filter 的时候要小心点儿，别弄坏了其它部分哟。
使用mask-image限定区域
itemEl.style.backgroundPosition = `-${Math.floor(i%8) * 16}px -${Math.floor(i/8) * 16}px `
想要遮住某个地方不让它模糊？很简单，用mask-image属性就行了！找个16×16像素的纯黑色图片（比如叫all-black.png）和mask-image搭配使用，就能随心所欲地操控模糊，让它仅在指定的区域起效。这样，你的画作会更有个性，最后完成的像素画也更独特亮眼哟～
完善与展望
这个改版后的图，简朴中带点儿复古味道是不是挺酷的！下次如果还想这么做的话，你可以自由发挥，按照你想要传达的意思进行微调或者设计哦～
总结与展望
.mask-group {
/* 以下为新增 */
grid-row-gap: 2px;
grid-column-gap: 2px;
}
.mask-item {
/* 以下为新增 */
filter: blur(8px)
}
这个教程教你怎么用CSS搞一个炫酷的图片，像画像素画一样容易理解！步骤和诀窍都看得清清楚楚，动手试试，哪个效果好用哪个！多尝试几次才能找到最合适的。相信未来还会有更多实用又好玩的工具，让我们的创作无限可能。
。
评论0