本文翻译自AFancyHoverEffectForYourAvatar，略有删改，有兴趣的可以阅读原文。你知道当一个人的头从圆圈或洞中伸出时的效果吗？本文将使用一种非常简洁的方式来实现悬停效果，可以用在你的头像交互中。看见？我们将制作一个缩放动画，其中化身部分似乎从它所在的圆圈中弹出。这不是很酷吗？接下来，让我们一起一步步搭建这个动画交互。HTML：只需要一个元素是的，只需要一个img图像标签，这个练习的挑战性部分是使用尽可能少的代码。如果你跟着我一段时间了，你应该已经习惯了。我努力寻找可以用最小、最易维护的代码实现的CSS解决方案。首先我们需要一个透明背景的正方形图片文件，下面是本例中使用的图片。在开始CSS之前，我们先来分析一下效果。图像在悬停时变大，所以我们肯定会在这里使用transform:scale。头像后面有一个圆圈，径向渐变应该可以解决问题。最后，我们需要一种方法来在圆的底部创建一个边框，该边框不会受到整体缩放的影响，并且在视觉上位于顶部。放大效果放大效果，增加transform:scale，这个比较简单。img:hover{transform:scale(1.35);}上面说了，背景是径向渐变。我们创建了一个径向渐变，但两种颜色之间没有过渡，看起来就像我们画了一个带有实线边框的圆圈。img{--b:5px;/*边框宽度*/background:radial-gradient(circleclosest-side,#ECD078calc(99%-var(--b)),#C02942calc(100%-var(--b))99%,#0000);}请注意，此处表示“边框”宽度的CSS变量--b实际上只是用于定义径向渐变的红色部分的位置。下一步是调整鼠标悬停时的渐变大小，圆圈需要保持与放大图像相同的大小。由于我们正在应用缩放变换，我们实际上需要减小圆圈的大小，否则它会变大与头像的大小。让我们首先定义一个CSS变量--f来定义“比例因子”并使用它来设置圆的大小。我使用1作为默认值，因为这是我们要转换的图像和圆圈的初始比例。现在我们必须将背景定位在圆的中心，并确保它占据整个高度。我喜欢直接在background属性中缩写所有内容，代码如下：background:radial-gradient()50%/calc(100%/var(--f))100%no-repeat;背景放在中间（50%），宽度等于calc(100%/var(--f))，高度等于100%。当--f等于1时就是我们的初始比例。同时，渐变占据了容器的整个宽度。当我们增加--f时，元素的大小会增加，但梯度的大小会减小。越来越近了！我们在顶部添加了溢出效果，但我们仍然需要隐藏图像的底部，使其看起来像跳出圆圈而不是整体漂浮在圆圈前面。这是整个过程中比较复杂的部分，这就是我们接下来要做的。底部边框首先尝试使用border-bottom属性，但无法找到使边框大小与圆圈大小相匹配的方法。如图所示，相信大家也看出来了，我们想要的效果是达不到的：实际的解决办法是使用outline属性。不是边界。outline允许我们创建很酷的悬停效果。结合outline-offset偏移，就可以达到我们想要的效果。它的核心是在图像上设置轮廓并调整其偏移量以创建下边框。偏移量将取决于比例因子，与渐变大小相同。outline-offset偏移看起来比较复杂。这里简化了计算方法。有兴趣的可以阅读原文。img{--s:280px;/*图片大小*/--b:5px;/*边框厚度*/--c:#C02942;/*边框颜色*/--f:1;/*初始比例*/border-radius:00999px999px;大纲：var(--b)solidvar(--c);outline-offset:calc((1/var(--f)-1)*var(--s)/2-var(--b));}因为我们想要一个圆底边框，所以添加了一个边框圆角在底部使轮廓匹配渐变的曲率。现在我们需要弄清楚如何从轮廓中移除顶部，即上图中阻挡头部的线。换句话说，我们只需要图像的底部轮廓。首先，在顶部添加blanks和padding，帮助避免顶部头像重叠，可以通过增加padding来实现：padding-top:calc(var(--s)/5)这里还有一点需要注意，你需要添加添加到背景的内容框值：背景：径向渐变（圆圈最近侧，#ECD078calc（99%-var（--b）），var（--c）calc（100％-var（--b))99%,#0000)50%/calc(100%/var(--f))100%无重复内容框；这样做是因为我们添加了填充，并且我们只希望将背景设置为内容框，因此我们必须明确定义它。CSS掩码到最后一部分！我们所要做的就是隐藏一些碎片。为此，我们将依赖CSSmask属性，当然还有渐变。下图说明了我们需要隐藏什么或需要显示什么才能更准确。左边的图是我们现在有的，右边的图是我们想要的。绿色部分说明了我们必须应用于原始图像以获得最终结果的蒙版内容。我们可以识别面具的两个部分：底部的圆形部分，其尺寸和曲率与我们用来创建头像后面的圆圈的径向渐变相同，顶部的矩形部分覆盖了头像内部的区域轮廓。注意轮廓是如何在顶部的绿色区域之外的——这是最重要的部分，因为它允许修剪轮廓，以便只有底部可见最终的完整css如下，提取重复的代码，如--_g,--_o:img{--s:280px;/*图片大小*/--b:5px;/*边框厚度*/--c:#C02942;/*边框颜色*/--f:1;/*初始比例*/--_g:50%/calc(100%/var(--f))100%无重复内容框；--_o:计算((1/var(--f)-1)*var(--s)/2-var(--b));宽度：var(--s)；纵横比：1；填充顶部：calc(var(--s)/5);游标：指针；边界半径：00999px999px；大纲：var(--b)solidvar(--c);轮廓偏移量：var(--_o);背景：径向梯度（圆圈最近侧，#ECD078calc（99%-var（--b）），var（--c）calc（100%-var（--b））99%，#0000）变量（--_g）；mask:linear-gradient(#00000)no-repeat50%calc(-1*var(--_o))/calc(100%/var(--f)-2*var(--b))50%,radial-gradient(circleclosest-side,#00099%,#0000)var(--_g);变换：比例（var（--f））；过渡：.5s；}img：悬停{--f：1.35；/*霍夫rscale*/}下面的演示形象地说明了mask的使用。该区域中间的框表示由两个渐变组成的遮罩层。把它想象成左边图像的可见部分，你在右边得到最终结果：完成！我们不仅实现了流畅的悬停动画，而且只用了一个![]()
元素和不到20行CSS技巧！如果我们允许自己使用更多的HTML，我们可以简化CSS吗？当然。但我们是来学习新的CSS技巧的！这是探索CSS渐变、遮罩、outline属性的行为、过渡和许多其他方面的绝佳练习。在线效果示例中是流行CSS开发人员的照片。有兴趣的同学可以展示一下自己的头像效果。https://code.juejin.cn/pen/71...如果您看完本文觉得有用，记得点赞支持。说不定哪天会用到~专注前端开发，分享前端相关技术干货，公众号：南城大学前端（ID：nanchengfe）
