头像是大家在网络沟通的第一印象，传统头像图片表明，只是便是一张图片摆在那，较为枯燥，假如头像图片能添加一些奇特的动画，我们不难发现头像图片就好玩儿起来。 也可以把头像图片制成头像图片从头框伸出来时的那种实际效果，这时候头像图片有一种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;
也可以把有反复代码开展抽身，搞成自变量。详细代码如下所示：
