这种设计技术一般在个人投资组合或设计工作室的网站中找的到。技能条代表知识与某些任务的水平 – 网页设计，插图，品牌，个性设计，！添加一些花哨的动画，这些技能栏将提供给观众一个更快的连接。
当然，这个做简历的话也是个不错的选择！

用CSS3关键帧制作个人技能栏

HTML代码

<div id="w">
    <div id="content">
      <h1>CSS3 关键帧制作的技能栏</h1>
      <p>我目前的技能</p>

      <div id="skillset">
        <h2>纯色的技能栏</h2>
        <div class="skill">
          <h3>HTML/CSS2 <sup>(100%)</sup></h3>
          <span class="bar"><span class="skillbar htmlcss">6 年</span></span>
        </div>
        <div class="skill">
          <h3>HTML5/CSS3 <sup>(70%)</sup></h3>
          <span class="bar"><span class="skillbar html5css3">1 年</span></span>
        </div>
        <div class="skill">
          <h3>jQuery <sup>(55%)</sup></h3>
          <span class="bar"><span class="skillbar jquery">1 年</span></span>
        </div>

        <div class="skill">
          <h3>WordPress <sup>(65%)</sup></h3>
          <span class="bar"><span class="skillbar wordpress">2 年</span></span>
        </div>

        <h2>彩色的技能栏</h2>

         <div class="skill">
          <h3>HTML/CSS2 <sup>(100%)</sup></h3>
          <span class="bar"><span class="skillbar htmlcss alt">6 年</span></span>
        </div>
        <div class="skill">
          <h3>HTML5/CSS3 <sup>(70%)</sup></h3>
          <span class="bar"><span class="skillbar html5css3 alt">1 年</span></span>
        </div>
        <div class="skill">
          <h3>jQuery <sup>(55%)</sup></h3>
          <span class="bar"><span class="skillbar jquery alt">1 年</span></span>
        </div>

        <div class="skill">
          <h3>WordPress <sup>(65%)</sup></h3>
          <span class="bar"><span class="skillbar wordpress  alt">2 年</span></span>
        </div>
      </div>
    </div>
  </div>

CSS代码

 /** 页面结构 **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 45px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

/** 技能栏 ui **/
#skillset {
  display: block;
  margin-bottom: 8px;
}

#skillset .skill { 
  display: block;
  margin-bottom: 20px;
}

#skillset .skill h3 {
  display: block;
  font-size: 1.55em;
  line-height: 1.4em;
  margin-bottom: 2px;
}

#skillset .skill .bar {
  display: block;
  height: 25px;
  line-height: 25px;
  width: 500px;
  padding: 3px 4px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 1px 1px 2px #969492;	
  -moz-box-shadow: 1px 1px 2px #969492;
  box-shadow: 1px 1px 2px #969492;
  background-color: #dadada;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#efeaea), to(#dadada));
  background-image: -webkit-linear-gradient(top, #efeaea, #dadada);
  background-image: -moz-linear-gradient(top, #efeaea, #dadada);
  background-image: -ms-linear-gradient(top, #efeaea, #dadada);
  background-image: -o-linear-gradient(top, #efeaea, #dadada);
  background-image: linear-gradient(top, #efeaea, #dadada);
}

#skillset .skill .bar .skillbar {
  display: block;
  height: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 1.1em;
  color: #414141;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.55);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-color: #4cc958;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#68e574), to(#4cc958));
  background-image: -webkit-linear-gradient(top, #68e574, #4cc958);
  background-image: -moz-linear-gradient(top, #68e574, #4cc958);
  background-image: -ms-linear-gradient(top, #68e574, #4cc958);
  background-image: -o-linear-gradient(top, #68e574, #4cc958);
  background-image: linear-gradient(top, #68e574, #4cc958);
}
#skillset .skill .bar .skillbar small { font-size: 0.85em; padding-left: 3px; vertical-align: top; }

/** css3 动画 **/
/** 填充模式 **/
#skillset .skill .bar .htmlcss {
  -moz-animation: htmlcss 1.5s ease-in-out forwards;
  -webkit-animation: htmlcss 1.5s ease-in-out forwards;
  animation: htmlcss 1.5s ease-in-out forwards;
}

#skillset .skill .bar .jquery {
  -moz-animation: jquery 1.5s ease-in-out forwards;
  -webkit-animation: jquery 1.5s ease-in-out forwards;
  animation: jquery 1.5s ease-in-out forwards;
}

#skillset .skill .bar .html5css3 {
  -moz-animation: html5css3 1.5s ease-in-out forwards;
  -webkit-animation: html5css3 1.5s ease-in-out forwards;
  animation: html5css3 1.5s ease-in-out forwards;
}

#skillset .skill .bar .wordpress {
  -moz-animation: wordpress 1.5s ease-in-out forwards;
  -webkit-animation: wordpress 1.5s ease-in-out forwards;
  animation: wordpress 1.5s ease-in-out forwards;
}

/** CSS3 keyframes **/
@-moz-keyframes htmlcss {
  0%   { width: 35px; }
  100% { width: 100%; }
}
@-webkit-keyframes htmlcss {
  0%   { width: 35px; }
  100% { width: 100%; }
}
@keyframes htmlcss {
  0%   { width: 35px; }
  100% { width: 100%; }
}

@-moz-keyframes html5css3 {
  0%   { width: 45px; }
  100% { width: 70%; }
}
@-webkit-keyframes html5css3 {
  0%   { width: 45px; }
  100% { width: 70%; }
}
@keyframes html5css3 {
  0%   { width: 45px; }
  100% { width: 70%; }
}

@-moz-keyframes jquery {
  0%   { width: 45px; } 
  100% { width: 55%; }
}
@-webkit-keyframes jquery {
  0%   { width: 45px; } 
  100% { width: 55%; }
}
@keyframes jquery {
  0%   { width: 45px; } 
  100% { width: 55%; }
}

@-moz-keyframes wordpress {
  0%   { width: 35px; } 
  100% { width: 65%; }
}
@-webkit-keyframes wordpress {
  0%   { width: 35px; } 
  100% { width: 65%; }
}
@keyframes wordpress {
  0%   { width: 35px; } 
  100% { width: 65%; }
}

/** 五彩的技能栏 **/
#skillset .skill .bar .skillbar.htmlcss.alt {
  background-color: #676767;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#858985), to(#676767));
  background-image: -webkit-linear-gradient(top, #858985, #676767);
  background-image: -moz-linear-gradient(top, #858985, #676767);
  background-image: -ms-linear-gradient(top, #858985, #676767);
  background-image: -o-linear-gradient(top, #858985, #676767);
  background-image: linear-gradient(top, #858985, #676767);
}

#skillset .skill .bar .skillbar.html5css3.alt {
  background-color: #9b35aa;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#af4ebd), to(#9b35aa));
  background-image: -webkit-linear-gradient(top, #af4ebd, #9b35aa);
  background-image: -moz-linear-gradient(top, #af4ebd, #9b35aa);
  background-image: -ms-linear-gradient(top, #af4ebd, #9b35aa);
  background-image: -o-linear-gradient(top, #af4ebd, #9b35aa);
  background-image: linear-gradient(top, #af4ebd, #9b35aa);
}

#skillset .skill .bar .skillbar.jquery.alt {
  background-color: #c98c34;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#dfa450), to(#c98c34));
  background-image: -webkit-linear-gradient(top, #dfa450, #c98c34);
  background-image: -moz-linear-gradient(top, #dfa450, #c98c34);
  background-image: -ms-linear-gradient(top, #dfa450, #c98c34);
  background-image: -o-linear-gradient(top, #dfa450, #c98c34);
  background-image: linear-gradient(top, #dfa450, #c98c34);
}

#skillset .skill .bar .skillbar.wordpress.alt {
  background-color: #4e59c3;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#5e6ae2), to(#4e59c3));
  background-image: -webkit-linear-gradient(top, #5e6ae2, #4e59c3);
  background-image: -moz-linear-gradient(top, #5e6ae2, #4e59c3);
  background-image: -ms-linear-gradient(top, #5e6ae2, #4e59c3);
  background-image: -o-linear-gradient(top, #5e6ae2, #4e59c3);
  background-image: linear-gradient(top, #5e6ae2, #4e59c3);
}

demo演示地址:http://www.w3cways.com/example?pid=1226