一、结构
结构还是很朴素的，星星是在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
本文转自 咖啡机（K.F.J） 博客园博客，原文链接：http://www.cnblogs.com/strick/p/4593023.html，如需转载请自行联系原作者
