从纯CSS蒙娜丽莎说起

从 1行HTML+纯CSS画蒙娜丽莎 说起。 复制那段HTML代码, 保存成.html文件,然后用Safari或者Chrome等先进的浏览器打开。 看到了什么? 这实际上是一个只用1个HTML5标签和一段CSS绘制出来的达芬奇名作蒙娜丽莎! 不含任何JavaScript哟! 上回还分享过CSS3画出来的超级英雄,可是人类似乎无法阻止CSS hacker们用CSS捣鼓更多玩意儿的步伐了。 这回硬生生画出了个这么复杂的图像。 不过如果去了解“成像原理”,发现其实是两码事。 这个蒙娜丽莎其实是将一张jpg图片转格式生成的,所以说只要你有那个转格式工具,小白也可以充大黑。和其他CSS作画行为比起来,好比是拍照和画画的区别。 而实现这一切的这部相机就是: image2css 这是Web设计师Jay Salvat在Github上的一个开源PHP项目。 git clone https://github.com/jaysalvat/image2css.git index.php上还提供了一些初始化选项,用来设置像素点的大小以及画面的柔化等,并且可以选择调用的图片。 $img = new PointlessImageToCssConverter(“monalisa.jpg”); $img->setWidth(200); $img->setPixelSize(4); $img->setBlur(4); 演示代码在CodePen: 纯CSS已经是某些人所追求的境界了,下次有机会和大家分享我玩过的一些纯CSS游戏。 欢迎到 GeeKaa HTML5 节点 分享和讨论更多HTML5相关资讯。 Update 一位叫Techird的网友分享了他的基于Canvas方案的相关文章「Image […]