V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
aiquit
V2EX  ›  分享创造

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

  •  
  •   aiquit · 2020-02-28 15:47:54 +08:00 · 2866 次点击
    这是一个创建于 1715 天前的主题,其中的信息可能已经有所发展或是发生改变。

    在家无聊,重新学习 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 的属性。

    效果预览:

    线上体验地址

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

    哆啦 A 梦

    我的博客

    github 地址

    欢迎 v 友来开脑洞

    第 1 条附言  ·  2020-02-28 20:33:14 +08:00

    效果预览:

    点击查看效果

    线上体验地址

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

    哆啦A梦

    20 条回复    2020-02-29 19:06:19 +08:00
    aiquit
        1
    aiquit  
    OP
       2020-02-28 15:53:25 +08:00
    一个 div+box-shadow 就可以绘制一张图片,脑洞大开
    wxsm
        2
    wxsm  
       2020-02-28 16:41:16 +08:00
    感觉没什么技术含量。。而且卡的一批
    soulmt
        3
    soulmt  
       2020-02-28 16:42:36 +08:00
    box-shadow 是渲染耗能最高的样式没有之一
    aiquit
        4
    aiquit  
    OP
       2020-02-28 17:49:01 +08:00
    @soulmt 研究 box-shadow 突然冒出这个想法,就实现了一下
    aiquit
        5
    aiquit  
    OP
       2020-02-28 17:49:35 +08:00
    @wxsm 这只是个想法和创意,确实没什么技术含量。
    gaoryrt
        6
    gaoryrt  
       2020-02-28 18:35:31 +08:00
    很有创意的想法,可惜不是第一个有这个想法的人。。。
    the codepen spark 隔三差五就会出现一个 box-shadow 描点画的 project
    aiquit
        7
    aiquit  
    OP
       2020-02-28 18:44:50 +08:00
    @gaoryrt 好吧,我第一次看到这个
    purensong
        8
    purensong  
       2020-02-28 19:48:44 +08:00
    404
    buxudashi
        9
    buxudashi  
       2020-02-28 19:57:24 +08:00
    防爬虫用吧。
    aiquit
        10
    aiquit  
    OP
       2020-02-28 20:25:04 +08:00
    @buxudashi 我觉得可以有,这个不错
    aiquit
        11
    aiquit  
    OP
       2020-02-28 20:25:43 +08:00
    @purensong 服务器误操作,网站不小心被我清了。。。
    yoyooyooo
        12
    yoyooyooo  
       2020-02-28 23:01:05 +08:00
    村通。。阴影画图片很占资源,适合玩玩,或者画像素不高的图标,还能配合过渡做些动画效果
    ITJoker
        13
    ITJoker  
       2020-02-28 23:28:12 +08:00
    firefox 打开很卡 死了一次
    soulmt
        14
    soulmt  
       2020-02-29 09:11:10 +08:00
    哈哈,脑洞还是很棒滴
    aiquit
        15
    aiquit  
    OP
       2020-02-29 10:08:41 +08:00
    @yoyooyooo 嗯嗯
    aiquit
        16
    aiquit  
    OP
       2020-02-29 10:09:01 +08:00
    @ITJoker 我的锅
    aiquit
        17
    aiquit  
    OP
       2020-02-29 10:09:24 +08:00
    @soulmt 哈哈
    rzzm
        18
    rzzm  
       2020-02-29 10:26:39 +08:00
    @aiquit po 主应该把"耐心等待", 加大加红!
    buxudashi
        19
    buxudashi  
       2020-02-29 18:58:53 +08:00
    加入点随机点阵。
    你弄成数字类的验证码好了。登录时输入验证码那种。这样防机器识别。
    弄个 api 可以公开了。会有人用的。
    aiquit
        20
    aiquit  
    OP
       2020-02-29 19:06:19 +08:00
    @buxudashi 这个可以有,有空试试。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2790 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 14:11 · PVG 22:11 · LAX 06:11 · JFK 09:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.