Welcome, Old Sport!

CSS3技能动画栏

by ilikecss ON 2011/10/19 6075

skill bar animation with css3同志们,这款效果很简单,单纯的CSS3动画效果,相信在自己的网站介绍里添加一组会很漂亮,颜色和字体按个人喜好设置;
※注意请使用支持CSS3的浏览器查看效果。FirefoxSafariChrome,如不可以请升级版本!

Step1. 创建HTML

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

Step2. 创建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%;} }
5条评论
  1. #1

    lz什么的最好了说道:

    恕我愚昧,这是一个CSS3的效果图吧。。
    我以为会动的。。。

    • 会动的,我用的是Firefox3.6,你的Chrome版本过低可能,不支持CSS3动画

  2. #2

    Curtis说道:

    Thanks for using the time and effort to write something so interesting.




TOP