这是一个创建于 1731 天前的主题，其中的信息可能已经有所发展或是发生改变。
在家无聊，重新学习 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 的属性。
效果预览：
** 浏览器计算需要时间，耐心等待即可 **
欢迎 v 友来开脑洞
20 条回复 • 2020-02-29 19:06:19 +08:00
 |
1
aiquit OP 一个 div+box-shadow 就可以绘制一张图片，脑洞大开
|
 |
2
wxsm 2020-02-28 16:41:16 +08:00
感觉没什么技术含量。。而且卡的一批
|
 |
3
soulmt 2020-02-28 16:42:36 +08:00
box-shadow 是渲染耗能最高的样式没有之一
|
 |
6
gaoryrt 2020-02-28 18:35:31 +08:00
很有创意的想法，可惜不是第一个有这个想法的人。。。
the codepen spark 隔三差五就会出现一个 box-shadow 描点画的 project |
 |
8
purensong 2020-02-28 19:48:44 +08:00
404
|
 |
9
buxudashi 2020-02-28 19:57:24 +08:00
防爬虫用吧。
|
 |
12
yoyooyooo 2020-02-28 23:01:05 +08:00
村通。。阴影画图片很占资源，适合玩玩，或者画像素不高的图标，还能配合过渡做些动画效果
|
 |
13
ITJoker 2020-02-28 23:28:12 +08:00
firefox 打开很卡 死了一次
|
|
14
soulmt 2020-02-29 09:11:10 +08:00
哈哈，脑洞还是很棒滴
|
|
19
buxudashi 2020-02-29 18:58:53 +08:00
加入点随机点阵。
你弄成数字类的验证码好了。登录时输入验证码那种。这样防机器识别。 弄个 api 可以公开了。会有人用的。 |
Select Language