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

[molvqingtai]

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

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

[tanranran]

同求

[tanranran]

看样子是 SVG 画的路径

[CloudnuY]

[zhengjian]

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