当青训营遇上码上掘金
学了一年前端了，想借此测试一下自己的css功底，发现还是太菜了，实现的功能都很简单(本来一开始想用Vue组件库来着，但是码上掘金好像不支持，就直接用CSS简单实现一下了)🥰🥰
静态图展示：
先说一下，这里我使用的是flex布局。所以整体的构造可以分为上面的 avatar 部分，下面的 profile 部分，整体用盒子 card 包裹住，所以最最基本的html结构就有了。前端布局很适合这种从大框架出发，一步一步细分。
<div class="card">
<div class="avatar">
<img />
</div>
<div class="profile"></div>
</div>
当然也要加上css样式，这里只展示最基本的，宽度、高度、对齐效果大家想要尝试或者做的更棒的话，可以自行修改
.card {
display: flex;
flex-flow: column;
}
.avatar {
transition: all .5s;
}
.avatar:hover {
rotate: 360deg;
}
flex 布局方向当然选择 column，而且为了让卡片更有有效果，我还为头像在鼠标经过时加入了 rotate 属性，这样鼠标放上去就有旋转一周的动画了，再次注意这里只加了基本的样式，在最后我会附上完整的代码。
再接下来就是 profile 的修改了，这里我还是采用的 flex 布局，很明显方向也是 column
<div class="profile">
<div></div>
<div class="enter">
<img /> <!-- github图片 -->
<span></span>
</div>
<div class="contact">
<div class="contact_item" id="eamil">
<img />
<div></div>
</div>
<div class="contact_item" id="phone">
<img />
<div class="link" id="phone_link"></div>
</div>
</div>
</div>
由于使用不了 icon 图表，这里我只能用 img 来替代了(效果不好见谅)，可以看到 profile 中包含三个 div 字标签，分别对应三块内容，第一个div代表用户名，第二个 enter 代表中间的"块状链接"，第三个contact 代表联系方式，也就是最下面的内容。需要注意的是 contact_item 盒子下会有两个元素，这一点卖个关子，下面再说，先贴上这部分基本的css代码。
.profile {
display: flex;
flex-flow: column;
}
.profile .enter {
display: flex;
transition: all .25s;
}
.profile .enter:hover {
background-color: #787878;
}
.contact {
display: flex;
}
还是flex布局，这部分代码也很好理解。
接下来就是将鼠标悬浮到最下面的信封和电话图片，就会显示对应的联系方式，并且图片也会向上移动了，其实这部分也很简单。
.contact .contact_item {
position: relative;
display: flex;
flex-flow: column;
transition: all .2s;
}
.contact .contact_item:hover {
transform: translateY(-1rem);
}
.contact .contact_item .link {
position: absolute;
bottom: 0;
left: 0;
display: none;
}
#eamil:hover #email_link {
display: block;
}
#phone:hover #phone_link {
display: block;
}
flex 布局不在多说，这个布局很常用，大家也能看出来是干什么的。
我们先将 contact_item 设置为相对定位，再将 link 设置为绝对定位，并固定在 contact_item 的下方位置，如果想调到正中位置，可以尝试 transform: translateX() 属性。
之后便是将 link 隐藏(display:none)，当我们悬浮到对应的图片时，再将其显示出来，为了美化动画，在 contact_item 设置了过渡效果，当鼠标悬浮到 contact_item 时，会有一小段向上的位移，这里使用 translateY 实现，因为这样不会占据其他盒子的空间。
到此，我的卡片就制作完成了，虽然其中也有很多不完善的地方，比如说中间的"github跳转块"不会自适应宽度，在一些比较窄的显示器中样式会崩，但我已经尽力做的很好了(呜呜，css基础知识还是太差了)，下面展示vue代码，如果不会vue的，可以把 <template> 标签内的内容复制到 <body> 中，<style> 标签就当普通的 style 样式就可以了。
不知道效果咋样，具体内容在 script 内容，不要问我为什么用 vue 写，因为开始想用组件库的，理想很丰满，现实很残酷（）
