当青训营遇上码上掘金，我遇见了这样一个简洁高效的在线代码编程平台。
创作主题
名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。
请大家围绕“我的名片”这个主题进行代码创作。
项目思路
传统上作为个人名片，会有正反面，正面需要简洁明了，反面需要信息详实，受到几位大佬作品的感染，我通过拙略效仿，设计了一个具备简单动画的名片。
名片由HTML以及CSS代码构成：
- 将正反面设计成top和bottom上下两个块部分，借助css实现过渡动画，当鼠标移入时，分别对块的大小进行调整。
.box:hover .box-top{
height: 60px;
}
.box:hover .image{
width: 35px;
height: 35px;
transform: translate(-130px,-10px);
}
.box:hover .box-bottom{
top: 300px;
}
.box:hover .box-bottom2{
top: 50px;
}
-
对于鼠标与图标的交互效果，同样借助CSS实现变色效果。
-
部分icon图标由阿里云的数据库提供。CSS外部依赖资源链接：
https://at.alicdn.com/t/c/font_3317563_7rtsyw4jds8.css -
头像对应插入图片
，使用边框弧度函数border-radius设置为圆形，这时我们会发现头像周围形成了一个圆形边框。这里我们使用@keyframes规则每间隔几秒过渡一次，便生成了炫彩的头像框效果。特别注意，图片应当插入在一个块级元素内，才能实现该效果。
代码展示
不足之处
- 对于图标来说，还没有匹配联系信息，也没有写点击图标便进行号码复制的效果。
- 对于名片来说，信息密度还是简单，不能达到通过名片展现我自己的能力。
- 对于交互来说，能够实现的交互不能覆盖到所有元素，互动效果不够深入。
总结
这是我在掘金社区创造的第一篇代码分享类文章，在青训营的学习中，希望能了解、学习到更多更扎实的前端技术。同样，在拜读各位大佬的文章时，我了解到，学习前端，不仅需要深入领会，更需要经常动手练习，才能做到用之即来，下笔有神。
在码上掘金平台的使用中，我也感受到如何设计出一个方便、直观、顺手、高效的代码产出平台。前端也是一个能展示自己个人风格的领域，希望在以后的练习中能够展现出我们自己的风采。
