CSS3实现的评分柱状图效果

横向评分柱状图效果，有了css3，以后再也不用通过背景和图片来展示了，需要浏览器支持CSS3才可以

查看演示页面 View Demo 查看全部代码 View Code

CSS定义

<style type="text/css">
#skill {
 list-style:none;
 padding-top:30px;
}
#skill li {
 margin-bottom:50px;
 background:#222;
 height:7px;
 border-radius:3px;
 border: 1px solid #333;
}
#skill li em {
 position:relative;
 top:-30px;
 font-style: normal;
}
.expand {
 height: 7px;
 background: #FF6600;
 position: absolute;
 box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.4);
}
.google       { width:85%;  -moz-animation:google 2s ease-out;       -webkit-animation:google 2s ease-out;       }
.baidu        { width:40%;  -moz-animation:badiu 2s ease-out;        -webkit-animation:baidu 2s ease-out;        }
.facebook      { width:70%;  -moz-animation:facebook 2s ease-out;      -webkit-animation:facebook 2s ease-out;      }
.twitter   { width:60%;  -moz-animation:twitter 2s ease-out;   -webkit-animation:twitter 2s ease-out;   }
.sharejs { width:75%; -moz-animation:sharejs 2s ease-out; -webkit-animation:sharejs 2s ease-out; }
@-moz-keyframes google       { 0%  { width:0px;} 100%{ width:85%;}  }
@-moz-keyframes baidu        { 0%  { width:0px;} 100%{ width:40%;}  }
@-moz-keyframes facebook      { 0%  { width:0px;} 100%{ width:70%;}  }
@-moz-keyframes twitter   { 0%  { width:0px;} 100%{ width:60%;}  }
@-moz-keyframes sharejs { 0%  { width:0px;} 100%{ width:75%;} }
</style>

HTML代码

<ul id="skill">
<li><span class="expand google"></span><em>google.com</em></li>
<li><span class="expand baidu"></span><em>baidu.com</em></li>
<li><span class="expand facebook"></span><em>facebook.com</em></li>
<li><span class="expand twitter"></span><em>twitter.com</em></li>
<li><span class="expand sharejs"></span><em>sharejs.com</em></li>
</ul>