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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 2315 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

人物

轮廓

宋体

img

4 条回复 • 2018-08-10 22:53:20 +08:00

tanranran

2018-08-10 22:24:56 +08:00

同求

tanranran

2018-08-10 22:25:28 +08:00

看样子是 SVG 画的路径

CloudnuY

2018-08-10 22:28:01 +08:00

zhengjian

2018-08-10 22:53:20 +08:00

.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 路径动画就可以了