介绍

“如果给自己设计一张电子名片，希望它是什么样子？”我想象着自己的名片，首先要好看，给人留下第一好印象；内容简单一些，名片主要是呈现联系方式。既然是参加青训营，不是正式面试，就来一个天马行空的自我介绍，~~掩饰一下自己的菜鸡水平哈哈。~~

方案设计

这次名片设计主要涉及到几个要素：

那么代码也要分出这几块：背景区，卡片区（主要展示卡片样式），文字内容区（比如字体样式、对齐方式等），卡片翻转动作。主要使用HTML+CSS实现。

我比较喜欢有点时尚、科技感的颜色，所以就用了蓝紫渐变方案，也是这几年比较流行的风格。关于ui配色有很多好用的网站，这里推荐几个：

将卡片本身和文案区分开，这一块的代码主要设计卡片的样式。名片设为半透明的白色，带一点磨砂质感，再用border边线颜色强调高光和暗边。用box-shadow给卡片整体加上投影，增加立体感。

卡片分为两面，一面是自我介绍语，另一面是联系方式，即<div>分为了front和back两块。将两面重叠到一起，实现正反效果，可以将backface-visibility设为hidden，这样展示一面时，另一面就看不到了。

这个动效比较简单，当鼠标hover时，给卡片添加响应效果即可。而翻转的样式需要提前在正反面中设计好，水平翻面就是rotateX，如果想做成左右翻转，则可以使用rotateY。另外需要调整动效时间，并使其看起来更流畅。

总结：名片的模块比较简单，但是想达到好看的效果，要不断微调，再小的练习也需要耐心和细心。