在家无聊,重新学习 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 友来开脑洞
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 可以公开了。会有人用的。 |