当青训营遇上码上掘金

前言

开始看到选题时其实心里有想法选择主题2:遇见,心里的初步构想是随着进度条的滚动展示一幅浪漫治愈的故事……奈何时间不够水平不足，心有余而力不足，这些想法等以后技术水平达到之后再考虑吧！所以这次的选题是主题1：我的名片。

任务介绍

主题 1：我的名片
名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。

原本打算做成一张能翻面的卡片形式，但我觉得只有正反面的名片不足以展现一个人的多元性，我理想中的名片至少应该由三部分组成，第一部分是门面基本信息：姓名年龄。第二部分是联系方式。而第三部分可以是爱好，这样分成三部分既能让只是想要知道你的基本信息的人快速从第一第二部分捕捉到信息，又能让有时间对你进行进一步了解的人通过第三部分的爱好进一步认识你。

实现

在做名片的过程中有一个小插曲，原本准备好的图片因为还没有很熟悉如何将图片上传到网上获得链接，然后码上掘金又不支持文件上传，所以只能临时在网上另寻了三张复制网址过来。
最终呈现效果： 在鼠标覆盖上时会展现文字，主要利用的是在hover时候css的转换：

.box:hover{
flex-basis: 100%;
}
.box:hover>img{
width:200%;
height:75%;
object-fit: cover;
transition:0.5s;

}

总结

静态样式和动画效果的实现可以有很多，既需要对基本的使用熟悉，也离不开日常的积累，平时无聊的时候可以多看看一些有趣的动画效果，下次想到要用的时候可以搬出来用。