放大效果扩大的实际效果,提升transform:scale

扩大的实际效果，提升transform：scale，这一非常简单。

img:hover%20{
%20%20transform:%20scale(1.35);
}

上边曾经说过背景是一个径向渐变。大家创建一个径向渐变，可是2个色调中间不能有过渡效果，那样使得它看起来像是大家画了一个有虚线外框的圆。

img%20{
%20%20--b:%205px;%20/*%20border%20width%20*/

%20%20background:
%20%20%20%20radial-gradient(
%20%20%20%20%20%20circle%20closest-side,
%20%20%20%20%20%20#ECD078%20calc(99%%20-%20var(--b)),
%20%20%20%20%20%20#C02942%20calc(100%%20-%20var(--b))%2099%,
%20%20%20%20%20%20#0000
%20%20%20%20);
}

留意CSS自变量，--b，在这儿它表明“外框”的宽度，事实上仅仅用以界定径向渐变鲜红色一部分位置。

下一步要在悬浮时调节渐变色尺寸，伴随着图像的变大，圆需要保持尺寸不会改变。因为我们正运用scale转换，因而事实上必须减少圆形大小，不然他会伴随着化身为大小而扩大。

使我们最先界定一个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特性。并不是border。outline能够让我们制造出很帅的悬浮功效。融合 outline-offset 偏移，大家就能实现所需的实际效果。

其核心要在图象上设置一个outline轮廊并调整其偏移以创建下外框。偏移将在于比例因子，与渐变色尺寸同样。outline-offset 偏移看上去相对性较为复杂，这儿对计算方法展开了精减，感兴趣的可以看一下全文。

img {
  --s: 280px; /* image size */
  --b: 5px; /* border thickness */
  --c: #C02942; /* border color */
  --f: 1; /* initial scale */
  border-radius: 0 0 999px 999px;
  outline: var(--b) solid var(--c);
  outline-offset: calc((1 / var(--f) - 1) * var(--s) / 2 - var(--b));

}

只要我们必须一个圆形底部外框，因此在底部加了一个外框圆弧，使轮廊与渐变色的变形水平相符合。

如今我们需要找到怎样从轮廊中删掉顶端，其实就是上图中遮挡头像图片的那根线。也就是说，我们只需图象底部轮廊。最先，在上方加上空缺和添充，可以帮助防止顶端头像图片的重合，这通过增加padding就可以实现：

padding-top: calc(var(--s)/5)

这里有一个注意事项，必须加上 content-box 值导入到 background：

background:
  radial-gradient(
    circle closest-side,
    #ECD078 calc(99% - var(--b)),
    var(--c) calc(100% - var(--b)) 99%,
    #0000
  ) 50%/calc(100%/var(--f)) 100% no-repeat content-box;

这么做是因为加了padding添充，而且我们只是想将背景设置为内容框，因而我们应该显式地界定出去。

CSS mask

到最后一部分！我们要做的是藏起一些碎片。因此，我们将要取决于 CSS mask 特性，除此之外还有渐变色。

下面的图反映了我们应该隐藏具体内容或者需要标注的具体内容，便于更加准确。下左图就是我们目前拥有的，右图是我们想要的。翠绿色一部分反映了我们应该用于初始图象以获得最后的结果的蒙版具体内容。

大家可以识别mask的两大一部分：

• 底部环形一部分，和我们用于建立化身为后边的圆圆的径向渐变具有相同的层面和折射率
• 上方的方形，遮盖轮廊内部地区。一定要注意轮廊是怎样坐落于上方的绿色区域以外的-这也是重要组成部分，因为他容许裁切轮廊，便于仅有底端部分可见

最后的一体化css如下所示，对反复的代码开展抽身，如--_g，--_o：

img%20{
%20%20--s:%20280px;%20/*%20image%20size%20*/
%20%20--b:%205px;%20/*%20border%20thickness%20*/
%20%20--c:%20#C02942;%20/*%20border%20color%20*/
%20%20--f:%201;%20/*%20initial%20scale%20*/

%20%20--_g:%2050%%20/%20calc(100%%20/%20var(--f))%20100%%20no-repeat%20content-box;
%20%20--_o:%20calc((1%20/%20var(--f)%20-%201)%20*%20var(--s)%20/%202%20-%20var(--b));

%20%20width:%20var(--s);
%20%20aspect-ratio:%201;
%20%20padding-top:%20calc(var(--s)/5);
%20%20cursor:%20pointer;
%20%20border-radius:%200%200%20999px%20999px;
%20%20outline:%20var(--b)%20solid%20var(--c);
%20%20outline-offset:%20var(--_o);
%20%20background:%20
%20%20%20%20radial-gradient(
%20%20%20%20%20%20circle%20closest-side,
%20%20%20%20%20%20#ECD078%20calc(99%%20-%20var(--b)),
%20%20%20%20%20%20var(--c)%20calc(100%%20-%20var(--b))%2099%,
%20%20%20%20%20%20#0000)%20var(--_g);
%20%20mask:
%20%20%20%20linear-gradient(#000%200%200)%20no-repeat
%20%20%20%2050%%20calc(-1%20*%20var(--_o))%20/%20calc(100%%20/%20var(--f)%20-%202%20*%20var(--b))%2050%,
%20%20%20%20radial-gradient(
%20%20%20%20%20%20circle%20closest-side,
%20%20%20%20%20%20#000%2099%,
%20%20%20%20%20%20#0000)%20var(--_g);
%20%20transform:%20scale(var(--f));
%20%20transition:%20.5s;
}
img:hover%20{
%20%20--f:%201.35;%20/*%20hover%20scale%20*/
}

下边的一个演试，直观地表明mask的应用地区。中间框反映了由两个渐变色所组成的遮罩层。将它想像成左侧图像的由此可见一部分，你就能得到右侧的最后的结果：

最终

解决！我们不仅实现了一个顺畅的悬浮动漫，并且仅用了一个<img>主题元素不上20行CSS方法！假如我们接受自己应用更多HTML，我们可以简单化CSS吗？完全可以。但是我们就是来学习培训CSS新方法的!这是一个很好的训练，能够探寻CSS渐变色、蒙版、outline属性个人行为、变换以及其它很多具体内容。

线上实际效果

案例里有最流行的CSS开发者的图片。感兴趣的小伙伴可以展示一下自己头像实际效果。

看了文中如果你觉得有效，还记得给我点个赞适用，保存起来没准儿就拿上啦～

专注于前端工程师，共享前面相关应用干货知识，微信公众号：东城大前端（ID: nanchengfe）