<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); } .html5 { width:85%; -moz-animation:html5 2s ease-out; -webkit-animation:html5 2s ease-out; } .css3 { width:80%; -moz-animation:css3 2s ease-out; -webkit-animation:css3 2s ease-out; } .jquery { width:70%; -moz-animation:jquery 2s ease-out; -webkit-animation:jquery 2s ease-out; } .photoshop { width:100%; -moz-animation:photoshop 2s ease-out; -webkit-animation:photoshop 2s ease-out; } .dreamweaver { width:100%; -moz-animation:dreamweaver 2s ease-out; -webkit-animation:dreamweaver 2s ease-out; } @-moz-keyframes html5 { 0% { width:0px;} 100%{ width:85%;} } @-moz-keyframes css3 { 0% { width:0px;} 100%{ width:80%;} } @-moz-keyframes jquery { 0% { width:0px;} 100%{ width:70%;} } @-moz-keyframes photoshop { 0% { width:0px;} 100%{ width:100%;} } @-moz-keyframes dreamweaver { 0% { width:0px;} 100%{ width:100%;} } </style> <ul id="skill"> <li><span class="expand html5"></span><em>HTML 5</em></li> <li><span class="expand css3"></span><em>CSS 3</em></li> <li><span class="expand jquery"></span><em>jQuery</em></li> <li><span class="expand photoshop"></span><em>Photoshop</em></li> <li><span class="expand dreamweaver"></span><em>Dreamweaver</em></li> </ul>

(www.xuejiqiao.com)提示：可修改后再运行代码!