单纯的CSS3横向评分柱状动画效果-JS特效-爱易网页

单纯的CSS3横向评分柱状动画效果

日期：2014-05-18　浏览次数：20241 次

以下是程序代码

<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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

相关资料更多>

传苹果中移动达成协议：新iPhone兼容TD制式

第二梯队也PK：当1号店“遇上”京东手机节

华为、小米和联想在中国手机市场上演“三国杀”

史玉柱卸任巨人网络CEO 继位人选引猜想

八位知名设计师评iOS7：新鲜但复杂

苹果App Store被大量刷榜:iTunes账号成帮凶

看，网络文学今日之繁盛；忆，纯真去哪了？

京东终于想明白，这些年错过的财运，都藏在女人的时装下

戴尔正告继续上市存风险称黑石伊坎方案有缺乏

香港全能空间免费试用15天香港高速云虚拟主机PHP/ASP/NET送MSSQL和MYSQL

推荐阅读更多>