This topic created in 2249 days ago, the information mentioned may be changed or developed.
在家无聊，重新学习 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 replies • 2020-02-29 19:06:19 +08:00
 |
1
aiquit OP 一个 div+box-shadow 就可以绘制一张图片，脑洞大开
|
 |
2
wxsm Feb 28, 2020
感觉没什么技术含量。。而且卡的一批
|
 |
3
soulmt Feb 28, 2020
box-shadow 是渲染耗能最高的样式没有之一
|
 |
6
gaoryrt Feb 28, 2020
很有创意的想法，可惜不是第一个有这个想法的人。。。
the codepen spark 隔三差五就会出现一个 box-shadow 描点画的 project |
 |
8
purensong Feb 28, 2020
404
|
 |
9
buxudashi Feb 28, 2020
防爬虫用吧。
|
 |
12
yoyooyooo Feb 28, 2020
村通。。阴影画图片很占资源，适合玩玩，或者画像素不高的图标，还能配合过渡做些动画效果
|
 |
13
ITJoker Feb 28, 2020
firefox 打开很卡 死了一次
|
|
14
soulmt Feb 29, 2020
哈哈，脑洞还是很棒滴
|
|
19
buxudashi Feb 29, 2020
加入点随机点阵。
你弄成数字类的验证码好了。登录时输入验证码那种。这样防机器识别。 弄个 api 可以公开了。会有人用的。 |
Select Language