随笔- 443 文章- 77 评论- 996 阅读- 105万

一、结构

结构还是很朴素的，星星是在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;
}