奇妙的头像特效

头像是我们在网络交流的第一印象，传统的头像显示，仅仅就是一张图片摆在那里，比较乏味，如果头像能添加一些奇妙的特效，我们会发现头像就好玩起来了。 我们可以把头像做成头像从头像框伸出来时的那种效果，这时头像有种3D的效果，我们接下来看看这种头像的展示效果。

这个头像特效实现起来绝对并不简单，我们来看看如何去实现它。 首先看到这个动态图片的效果想要实现的第一思路是先写一个div，再然后里面放一个图片，然后吧这个div和图片都设置成一个圆，当鼠标移入div的时候让图片放大，然后我们就会发现图片变成这个样子

我们会发现和我们想要实现的效果完全不一样，那咋整，我们接下来尝试去实现前面的头像效果。 首先我们先放一张图片 <img src="https://assets.codepen.io/1480814/av+1.png" alt="a random avatar picture" > 然后设置图片的尺寸和颜色，并且加个外边框，为了方便看清楚

现在我们的样子是这样子的

现在我们要把它变成圆的，背景是用径向渐变去实现的，我们先创建一个径向渐变，我们先给他扩散一个黄色的内容，然后再扩散一个红色的边框。我们创建径向渐变的时候要用最小边为半径来限制圆的范围，使用 circle closest-side，创建一个径向渐变的代码如下：

下一步是在鼠标移入时调整渐变大小，随着图像的放大，我们会发现圆也跟着变大，我们要保证背景图的大小始终都是不变。我们如何来处理呢？ 首先我们把图片放大两倍，就意味着我们要把背景图缩减到原的1/2 no-repeat center / calc(100% / 放大倍数) 我们先定义一个CSS变量--f，并使用它来设置圆的大小。

当 --f 等于 1 时是我们最初的比例。同时，当鼠标移入的时候改变这个变量

解决了鼠标移入时调整渐变大小的问题后，现在我们发现图片内容是覆盖背景的，就是目前这样子

我们下一步我们需要让它变成这个样子，我们如何来实现呢？

我们可以使用outline和border-radius来实现。 outline: var(--b) solid var(--c); border-radius: 0 0 999px 999px 如果外边框和内容有一些间隙的话，我们可以使用outline-offsst来处理，这个表示轮廓和border之间的距离，这个越大表示越远，我们可以把它设置成负数. outline-offset: -5px; 现在我们要处理的图片放大的时候外边框保持不变，也就是图片放大两倍，外边框也跟着放大两倍，我们要根据这个信息了动态的调整offset的值。我们要计算offset的值怎么计算呢？ 首先是要让放大过后的宽度减去放大之前的宽度然后再除于2。但是这其中有个坑就是，假如我们宽度为200时，我们offset最多只能的-100，因为已经到中心点了。如果放大倍数过大时会远远超过offset能设置的值。所以我们的计算公式应该是（s*f-s）/2/f也就是（s-s/f）/2，然后我们需要的负数的，需要再变一下(s/f-s)/2. 现在我们需要把圆以外的框框隐藏掉，我们可以使用mask,这个可以使只有图片覆盖的区域才会显示，其他地方都不会显示。 -webkit-mask: linear-gradient(#000 0 0) no-repeat 50% calc(1px + var(--borderWidth)) / calc(100% - 2 * var(--borderWidth) - 2px) 50%,radial-gradient(circle closest-side,#000 99%, #0000) center / 100% 100% no-repeat content-box; 我们可以把有重复的代码进行抽离，弄成变量。完整的代码如下：