CSS3动画效果演示，单纯的CSS3动画效果，相信在自己的网站介绍里添加一组这样的效果会很漂亮，颜色和字体按个人喜好设置。。注意请使用支持CSS3的浏览器查看效果。Firefox，Safari和Chrome。

点击(此处)折叠或打开

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\">
<head>
<title>CSS3技能动画栏</title>
<style>
body {
margin: 0;
padding: 0;
font-family: \'Nobile\', Arial, sans-serif;
font-size: 12px;
color: #666;
background: url(/jscss/demoimg/201205/pattern.png) repeat;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,
td{
margin: 0;
padding: 0;
}
table{
border-collapse: collapse;
border-spacing: 0;
}
img{
border-style:none;
vertical-align:top;
}
a { color: #FF6600;}
a:hover { text-decoration: none;}
h1.title_name {
font-family: \"Trebuchet MS\",\"Myriad Pro\",Arial,sans-serif;
font-weight: normal;
font-size: 4em;
color: #333;
margin: 0;
padding: 20px 0 0 0;
text-align: center;
line-height: 1em;
}
h1.title_name span {
font-family: normal Georgia,\'Times New Roman\',Times,serif;
color: #FF6600;
font-size: 0.9em;
}
h1.title_name small {
display: block;
font-family: normal Verdana,Arial,Helvetica,sans-serif;
font-size: 0.3em;
font-weight: bold;
letter-spacing: 0.5em;
text-transform: uppercase;
color: #AAA;
text-shadow: none;
}
#footer {
margin: 0 auto;
color: #666;
text-align: center;
letter-spacing: 1px;
}
#contents {
width: 278px;
margin: 50px auto 100px;
position: relative;
}
.col { width: 280px; }
.col h2 { margin: 0 0 20px 0;}
#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 5px 1px #666;
}
.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>
<script type=\"text/javascript\">
var _gaq = _gaq || [];
_gaq.push([\'_setAccount\', \'UA-23292263-1\']);
_gaq.push([\'_trackPageview\']);
(function() {
var ga = document.createElement(\'script\'); ga.type = \'text/javascript\'; ga.async = true;
ga.src = (\'https:\' == document.location.protocol ? \'https://ssl\' : \'http://www\') + \'.google-analytics.com/ga.js\';
var s = document.getElementsByTagName(\'script\')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id=\"wrapper\">
<div id=\"header\">
<h1 class=\"title_name\">Skill Bar Animation with <span>CSS3</span><small>by Sunflowa Media</small></h1>
</div>
<div id=\"contents\">
<div class=\"col\">
<h2>My Skill</h2>
<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>
</div>
</div>
</div>
</body>
</html>

ITPub博客

CSS3技能动画栏效果演示

最新文章