前言
当青训营遇上码上掘金，我的选题为： “主题 1：我的名片”
主题介绍：名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。
先看成品预览图
思路
作为一名前端，设计一张属于自己的电子卡片会显得非常趣味。这张简单的名片也能一定程度上反应一个前端的审美和设计倾向。
我的想法是设计一个仅借助:hover伪元素实现鼠标移上卡片后的动态效果。在上面可以搭配上一些CSS内容就可以实现简单的自我介绍。
三下五除二的功夫，我把卡片的静态样式完成
单凭这些不够看，下一环节讲讲我的设计细节以及之后动态的操作。
细节
-
色彩方面：取自南冥（#3271ae） + 以及其下一些颜色。
在我这种直男审美下，这几种颜色竟然碰撞出一定的和谐。
-
卡片的样式方面：非常简单，圆润卡片外型
container，内部文字text和头像avatar左右分离，利用红蓝黄三色线background点缀 -
头像来源是利用本人掘金主页的头像链接
-
三色线的设置：我下了点巧思，其实里面就很简单的三个
div盒子<div class = "background"> <div style = "--right:1.2"></div> <div style = "--right:0.2"></div> <div style = "--right:-0.8"></div> </div>这里埋下一个
right，在后面的CSS样式里面这样利用.background div{ position: absolute; right: calc(var(--right)*100px); transform: rotateZ(135deg); ... }这样就实现了三色线的倾斜静态效果
随后，开始设计hover引发的动态效果，我脑子里模拟一遍想法记录如下
0~0.5s：右边照片消失，同时三色线按顺序往外移动消失，为左侧文本留够空间0.5s~1s：左侧文本移到右侧1s~1.5s：右侧文本的其中一行文字移到左侧，同时变大，其他文字自然上移。1.5s~2.5s：另一些文本出现，三色线按顺序往回移动停住
注意
-
transfrom后面如果包含多个属性要注意先后顺序造成的影响，比如我的三原色的移走/进入，需要在旋转角度后在进行x轴的加减，那么我的代码就是transform: rotateZ(15deg) translateX(400px); -
transition带的第一个时间参数是动作时间，第二个时间是延迟时间，可以利用这个实现不同元素的时间先后移动顺序 -
在同一级别的元素可能会出现 “后来者居上” 的情况（即写在HTML里后面的元素覆盖在前面元素的上面的情况），此时如果想让 “后来者” 居于背景（比如我的三原色要在文字的背部），即使设置被压的元素的
z-index为9999也没有作用。此时只需要把 “后来者” 的z-index设为-1即可解决
得到第二页面，其中点击掘金名和两个链接均可跳转到相关页面，整个卡片除了掘金ID （嘻嘻） 均无法被鼠标选择
作品完成
