V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
molvqingtai
V2EX  ›  程序员

这个图片上的人物轮廓逐渐变清晰的效果是怎样实现的?

  •  
  •   molvqingtai · 2018-08-10 21:55:52 +08:00 · 3362 次点击
    这是一个创建于 2057 天前的主题,其中的信息可能已经有所发展或是发生改变。

    思源宋体官网: https://source.typekit.com/source-han-serif/cn/

    底部的团队人物图片有个 hover 效果,人物从轮廓逐渐变清晰 这种是什么算法实现的,感觉很牛逼,不知道有没有有现成的的轮子可以用?

    4 条回复    2018-08-10 22:53:20 +08:00
    tanranran
        1
    tanranran  
       2018-08-10 22:24:56 +08:00
    同求
    tanranran
        2
    tanranran  
       2018-08-10 22:25:28 +08:00
    看样子是 SVG 画的路径
    CloudnuY
        3
    CloudnuY  
       2018-08-10 22:28:01 +08:00
    zhengjian
        4
    zhengjian  
       2018-08-10 22:53:20 +08:00   ❤️ 1
    .container.team .designers .designer .picture img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: all 0.5s ease;
    }


    svg 形状覆盖在图片上面

    hover 的时候图片从透明度 0 到 100 渐变,同时触发 svg 动画

    我觉得主要要有一个设计师帮你画矢量的人物轮廓,然后复制为 svg,添加一个 svg 路径动画就可以了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3525 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 00:48 · PVG 08:48 · LAX 17:48 · JFK 20:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.