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

2014-02-07阅读(5547)评论(0)牵着狗狗看MM

苏州实时公交查询

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

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

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

HTML代码

[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>
[/html]

CSS代码

[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);
}
[/css]

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

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 用CSS3关键帧制作个人技能栏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏