当青训营遇上码上掘金
前言
名片是一个人向他人介绍自己信息的一种非常简单直接的方式，在此次的青训营码上掘金项目中我选择了个人名片的制作，希望通过设计来制作一张简约且好看的名片。
代码思路
名片的设计参考了CSDN上的网页前端UI设计id1078的作品，在此基础上进行了一些修改和添加。名片的主体内容包括基本个人信息：姓名、专业、个性签名。名片上还放上了地址、邮箱和电话，初步的设想是点击这些会跳转其他的网页，但是在基本的名片制作中省略的具体的跳转，仅做icon图标的展示。动画的设计是鼠标移动到名片上的时候，图片上移，显示更多信息，还会有一些小动画展示图标。
HTML代码
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Personal Card</title>
</head>
<body>
<div class="content" >
<div class="front" id="front">
<div class="image">
<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/45b81d8641a341318a4b0ae841ea2920~tplv-k3u1fbpfcp-watermark.image?">
</div>
<div class="introduce">
<div class="info">
<h2>Ruoxin Huang</h2>
<p><strong>Learning direction</strong>：front-end technology</p>
<p><strong>motto</strong>：This is Rhode Island. If you want to jump, jump here.</p>
<p><strong>school major</strong>:Electronic information science and technology</p>
</div>
</div>
<ul>
<li><a href="#">
<i class="ion-ios-home"></i>
</a></li>
<li><a href="#">
<i class="ion-ios-email"></i>
</a></li>
<li><a href="#">
<i class="ion-ios-telephone"></i>
</a></li>
</ul>
<div>
</body>
</html>
通过上述的HTML代码可以看出，名片的基本结构图片，文字介绍，和几个图标。个性签名选用了我很喜欢的一句话：这里就是罗德岛要跳就在这里跳。
CSS
CSS主要实现基本的格式设计，此处对动画图标部分做进一步的介绍。
首先是对页面的内容进行分层，利用z-index，将文字做第一层，图片做第二层，小图标做第三层，层层重叠，动画效果的显示就是鼠标移动到图片上的时候图片上移，显示出下面的文字，接着小图标上移到图片上。
引入图标
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
引入了外链的图标库，一开始的时候尝试用过link连接，但是发现edge的网页好像不是很方便用link，有时候会有不显示的问题。在html中用ul的标签引入三个图标，方便后续修改。
ul li a{
display: block;
height: 50px;
width: 50px;
color: #000;
line-height: 50px;
font-size: 30px;
border-radius: 20%; /*设置元素的外边框圆角 */
opacity: 0;
transform: translateY(200px);
background: #fff;
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
对图标的设计首先改成行级排版，让这几个元素在一行上，显示得更好看.并且将每一个元素设置外边框圆角，显出一个有圆角的方形图案。再使用层叠样式表，把元素移动到想要的位置。
动画设计
首先是图片的上移动，鼠标放到名片的图片上时，图片向上移动一点，露出下面的空白部分显示个人信息。
.front:hover .image{ /* hover选择器，选择鼠标指针浮动在其上的元素并设计样式 :鼠标悬停的时候图片上移110px*/
transform: translateY(-188px);
}
同时设置图片渐隐
.front:hover .image img{
opacity: 0.5; /*图片渐隐的透明程度，调节成0.5，即半透明*/
}
对于小图标的动画设计，设置延时，使得每个图标出现的时间有间隔
.front:hover > ul > li > a{ /*设置延时*/
opacity: 1;
transform: translateY(0);
}
.front:hover > ul > li:nth-child(2) a{
transition-delay: 0.5s;
}
.front:hover > ul > li:nth-child(3) a{
transition-delay: 1s;
}
