当青训营遇上码上掘金。
主题：我的名片
要求：名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。
演示界面
点击头像图片试一试~
详解：
为我的名片做了一个悬停效果的头像。
HTML部分：
这里需要一个图片标签用作名片头像，以及一个div文字介绍块。
<img src=""/>
<div>
<p>名片介绍</p>
</div>
CSS部分：
首先，头像图片放大的效果，增加 transform：scale。
接着，调整头像背景和小圈圈的缩放，会随着头像的放大而缩小。
我发现头像的底部没有藏进小圈圈里，这一步需要注意下边框不能再用 border 了，得用 outline 属性，它可以创造出很酷的悬停效果。结合偏移量 outline-offset ，就可以实现最后的效果。
然后，为了避免顶部头像的重叠，要在顶部添加空白部分，简简单单用的 padding 去实现。
最后一步，利用 mask 把多余圆圈外影响美观的部分隐藏掉。
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
grid-auto-flow: column;
gap: 30px;
background: #E0E4CC;
}
img {
--s: 200px;
--b: 6px;
--c: #ae3ec9;
--cb: #e9ecef;
--f: 1;
width: var(--s);
aspect-ratio: 1;
padding-top: calc(var(--s)/5);
cursor: pointer;
border-radius: 0 0 999px 999px;
--_g: 50%/calc(100%/var(--f)) 100% no-repeat content-box;
--_o: calc((1/var(--f) - 1)*var(--s)/2 - var(--b));
outline: var(--b) solid var(--c);
outline-offset: var(--_o);
background:
radial-gradient(
circle closest-side,
var(--cb) calc(99% - var(--b)),var(--c) calc(100% - var(--b)) 99%,#0000
) var(--_g);
-webkit-mask:
linear-gradient(#000 0 0) no-repeat
50% calc(1px - var(--_o)) / calc(100%/var(--f) - 2*var(--b) - 2px) 50%,
radial-gradient(circle closest-side,#000 99%,#0000) var(--_g);
transform: scale(var(--f));
transition: .5s;
}
img:hover {
--f: 1.4; /* hover scale */
}
思路来源：A Fancy Hover Effect For Your Avatar | CSS-Tricks - CSS-Tricks
