当青训营遇上码上掘金

1.我的个人名片

她大致就是长这个样子。就像题目里面说的那样，程序员用代码的方式介绍自己非常酷。与其说酷炫的事情，不如说是情怀，所谓有情众生皆是情怀，每个人都在用自己独一无二的脚本语言书写着自己的人生。所以我也想用自己的方式向大家介绍一部分的我自己，用代码的方式感知我与掘金这个社区，感知身边有同样爱好的朋友，感知我自己与计算机这个专业的牵连与归属。

其实这个名片非常简单，主要就是展示了我的地区、爱好、就读院校和联系方式，本来其实是想设计成白紫配色的，后来在初步调试代码的时候为了显示方便用了一下这个aquablue，发现绿紫的芭比配色也十分好看，比我之前的白紫要丰富很多，也显得更加活泼。

2.代码大致构造&我的想法

下方引入了一下码上掘金里我的代码，这样大家可以在看到代码的同时看到名片效果。 页面的轮廓主要由两个大盒子组成，外面的大盒子是紫色，里面是白色，这样上下重叠形成粗边框的效果。

页面的组成部分也由两个大盒子组成，一个是上面的top，用来放头像和title，一个是下面的bottom，用来放下面几个小项。

鼠标悬停在下方时，scale会变为原来的1.1倍，鼠标点击东北师范大学时会跳转到官网，另外我还设置了悬停时的游标样式，统一设置为pointer，也就是小手，非常可爱

感觉比较不错的是头像炫光光环和hover旋转的动画效果

.img{
  width: 120px;
  height: 120px;
  border-radius: 60px;
  animation: light 4s ease-in-out infinite;
  transition: 0.5s;
}
@keyframes light {
    0% {
        box-shadow: 0 0 4px #f00;
    }

    25% {
        box-shadow: 0 0 16px #0f0;
    }

    50% {
        box-shadow: 0 0 4px #00f;
    }

    75% {
        box-shadow: 0 0 16px #0f0;
    }

    100% {
        box-shadow: 0 0 4px #f00;
    }
}
.img:hover{
  transform: scale(1.2) rotate(720deg);
  z-index: 100;
  cursor: pointer;
}

3.改进与优化

可改进的地方是

1. 轮廓的外面紫色边框那部分，其实可以做成两个细边框的，奈何截止日期要到了qwq
2. 绿色背景和白色背景交替其实可以用结构伪类选择器，写完了才发现
3. 左边的item和右边value其实可以设计一下左边和右边对齐，只不过这次恰好四个选项都是四个字，避免了这种情况

4.写在最后

真的很感谢字节跳动青训营，陪伴我走过了这样一个充实的寒假，我比较喜欢的一点是青训营的一切安排都是非常井然有序按部就班的，不会突然告诉你大项目要交啦，也不会布置很多的任务搞得人为ddl发疯，每日的课程、直播以及笔记、打卡、创作活动督促着我不断学习、进步，在组队过程中也认识了很多志同道合的朋友，也收到了很多厉害的朋友的帮助，总之，希望我们都能为每一寸进步而欣喜，为每一个字节而跳动。