制作在线简历（三）——技能介绍

一、结构

结构还是很朴素的，星星是在font-awsome选的一符号，整个结构又是用一张table表格来搭的，选了两种底色作为顶部和左边的底色。

这里由于使用了自定义字体，就碰到了个问题，就是当点到这张星星页面的时候，字体还没加载进来，这个时候星星的位置要么是乱码要么是没有的，后面就去找了个解决方法，使用webfont loader，在字体加载成功的回调函数中再应用相应的font-family的CSS样式。

<script src="js/webfontloader.js"></script>
<script>
WebFont.load({
custom: {
families: ['FontAwesome']
}
});
</script>

对table的操作也做过记录，可以在《关于table的一些记录》查看到。

最左边的一栏还用了一些伪类选择符:first-child。

<table class="user_skill">
<thead>
<tr>
<th></th>
<th><h6>初学</h6></th>
<th><h6>熟悉</h6></th>
<th><h6>掌握</h6></th>
<th><h6>擅长</h6></th>
<th><h6>精通</h6></th>
</tr>
</thead>
<tbody>
<tr>
<td><h5>HTML</h5></td>
<td><i class="fa-star"></i></td>
<td><i class="fa-star"></i></td>
<td><i class="fa-star"></i></td>
<td><i class="fa-star"></i></td>
<td><i class="fa-star"></i></td>
</tr>
<tr>
<td><h5>CSS</h5></td>
<td><i class="fa-star"></i></td>
<td><i class="fa-star"></i></td>
<td><i class="fa-star"></i></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

.user_skill tbody tr td:first-child{
text-align:right;
margin-right:5px;
}
.user_skill tbody tr td:first-child h5{
background:#f26d7d;
display:inline-block;
padding:5px;
}

二、星星的动画

当刚进入画面的时候，这些星星是有个效果的。这个动画我是从animate.css中选了一个，叫做lightSpeedIn。直接将CSS复制过来的时候死活动不了，后面发现我少写了一个参数animation-duration。而CSS中的transition属性是当划过某行的时候，设置的过渡效果。

.user_skill tbody tr td i{
font-size:2rem;

-webkit-animation-name: lightSpeedIn;
-webkit-animation-duration:1s;
-webkit-animation-timing-function: ease-out;

animation-name: lightSpeedIn;
animation-duration:1s;
animation-timing-function: ease-out;

-moz-transition:all .4s ease;
-o-transition:all .4s ease;
-webkit-transition:all .4s ease;
transition:all .4s ease;
}
@-webkit-keyframes lightSpeedIn {
0% {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}

60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1;
}

80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
opacity: 1;
}

100% {
-webkit-transform: none;
transform: none;
opacity: 1;
}
}

@keyframes lightSpeedIn {
0% {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}

60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1;
}

80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
opacity: 1;
}

100% {
-webkit-transform: none;
transform: none;
opacity: 1;
}
}

三、划过某行的效果

当让鼠标划过某行的时候，我会让星星旋转180°，并放大1.5倍，颜色变红。transform可以将多个属性写在一起。

.user_skill tbody tr:hover i{
-webkit-transform: rotate(180deg) scale(1.5);
-moz-transform: rotate(180deg) scale(1.5);
-o-transform: rotate(180deg) scale(1.5);
-ms-transform: rotate(180deg) scale(1.5);
transform: rotate(180deg) scale(1.5);
color:#f26d7d;
}

源码下载：

http://download.csdn.net/detail/loneleaf1/8849069