用 css3 里面的 box-shadow 绘制图片 [开脑洞]

[aiquit]

在家无聊，重新学习 css3，突然脑洞打开，用 css3 的 box-shadow 绘制图片。

原理介绍

box-shadow: 15px 10px 0px rgb(255,255,255);

15px 代表 x 轴值，10px 代表 Y 轴,0px 代表模糊值，最后一个是颜色。

图片是由一个个像素点组成，在 html5 中，将容器宽高固定，然后设置**border-radius:50%;**就可以将容器变成一个圆点，很多圆点就可以绘制成图形。

因此可以写一个脚本将图片的每一个像素点的颜色值读取，然后与 x，y 值拼接成 box-shadow 的属性。

效果预览：

线上体验地址

** 浏览器计算需要时间，耐心等待即可 **

我的博客

github 地址

欢迎 v 友来开脑洞

效果预览：

点击查看效果

线上体验地址

** 浏览器计算需要时间，耐心等待即可 **

[aiquit]

一个 div+box-shadow 就可以绘制一张图片，脑洞大开

[wxsm]

感觉没什么技术含量。。而且卡的一批

[soulmt]

box-shadow 是渲染耗能最高的样式没有之一

[aiquit]

@soulmt 研究 box-shadow 突然冒出这个想法，就实现了一下

[aiquit]

@wxsm 这只是个想法和创意，确实没什么技术含量。

[gaoryrt]

很有创意的想法，可惜不是第一个有这个想法的人。。。
the codepen spark 隔三差五就会出现一个 box-shadow 描点画的 project

[aiquit]

@gaoryrt 好吧，我第一次看到这个

[purensong]

404

[buxudashi]

防爬虫用吧。

[aiquit]

@buxudashi 我觉得可以有，这个不错

[aiquit]

@purensong 服务器误操作，网站不小心被我清了。。。

[yoyooyooo]

村通。。阴影画图片很占资源，适合玩玩，或者画像素不高的图标，还能配合过渡做些动画效果

[ITJoker]

firefox 打开很卡 死了一次

[soulmt]

哈哈，脑洞还是很棒滴

[aiquit]

@yoyooyooo 嗯嗯

[aiquit]

@ITJoker 我的锅

[aiquit]

@soulmt 哈哈

[rzzm]

@aiquit po 主应该把"耐心等待", 加大加红!

[buxudashi]

加入点随机点阵。
你弄成数字类的验证码好了。登录时输入验证码那种。这样防机器识别。
弄个 api 可以公开了。会有人用的。

[aiquit]

@buxudashi 这个可以有，有空试试。