CSS3 动画配合clip属性创建圆形进度条动画
这里先讲下clip这个css中很少用到的样式，在w3chool是这样描述的
clip 属性剪裁绝对定位元素。
当一幅图像的尺寸大于包含它的元素时会发生什么呢？”clip” 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。
第一句话就很明确的表达了，裁剪元素必须带position:absolute;属性，然后才能使用clip去对图像进行裁剪。语法为
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);//0 60 200 0分别对应上，右，下，左四个方位
}
有关clip的详细说明可以参考：http://www.w3cplus.com/css3/clip.html
下面开始主题。
大概思路如下：
1.先画一个正方形边框，通过border-radius属性使他变成一个圆
2.设置动画效果，通过改变clip的裁剪方式使这个圆慢慢显现。
@-webkit-keyframes craw {
0% {
clip:rect(0em,1em,0em,0.5em);/*因为bottom属性为0，也就是一开始是不让他显示，right为1,left为0，显示的是右边那半圆*/
}
50%{
clip:rect(0em,1em,1em,0.5em);/*改变bottom的值使他从上往下慢慢显示到50%的时候停下刚好形成一个半圆*/
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
clip:rect(0em,1em,1em,0em);/*半圆之后开始改变left的值，但是会发现结果是从两段开始像中间合并，这并不是想要的结果，因此加了个旋转动画，虽然结果是有点差距，但是还算成功*/
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
}下面贴上源码：
<html class="no-js" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>CSS3动画技能栏title>
<style>
/* RESET */
* {
margin: 0;
padding: 0;
}
/* DEMO BODY */
body{
overflow-x: hidden;
overflow-y: scroll;
font-family: MuseoSans, Georgia, "Times New Roman", Times, serif;
font-size: 13px;
color: #444;
border-top: 3px solid #444;
background-color: #E4E6E5;
overflow-x:hidden;
}
section .demo {
width: 530px;
margin:15em auto;
overflow: hidden;
}
ul.notes { clear:both;}
ul.notes li {
float:left;
margin-right:3em;
display:inline;
}
ul.notes li:last-child {
margin:0;}
ul.notes li span.skill {
display:block;
text-align:center;
padding: 10px 0;
text-shadow: 1px 0 0 #FFFFFF;
}
.notesite {
display: inline-block;
position:relative;
width:1em;
height:1em;
font-size: 5.4em;
cursor:default;
}
.notesite > .percent {
position: absolute;
top: 20px;
left: 0;
width:100%;
font-size:25px;
text-align:center;
z-index:2;
}
.notesite > .percent .dec {
font-size:15px;
}
.notesite > #slice {
position:absolute;
width:1em;
height:1em;
clip:rect(0px,1em,1em,0.5em);
}
.notesite > #slice.gt50 {
clip:rect(auto, auto, auto, auto);
}
.notesite > #slice > .pie {
position:absolute;
border: 0.1em solid #444;
width:0.8em;
height:0.8em;
-moz-border-radius:0.5em;
-webkit-border-radius:0.5em;
border-radius:0.5em;
-webkit-animation: craw 2s linear;
-webkit-animation-iteration-count: 1;
}
@-webkit-keyframes craw {
0% {
clip:rect(0em,1em,0em,0.5em);
}
50%{
clip:rect(0em,1em,1em,0.5em);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
clip:rect(0em,1em,1em,0em);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
}
li.html .notesite > #slice > .pie {
border-color:#DF6C4F;
}
.notesite.fill > .percent {
display: none;
}
li.html .notesite:before {
background:#DF6C4F;
}
style>
head>
<body class="home">
<div class="wrapper">
<section>
<div class="demo">
<ul class="notes">
<li class="html"><div class="notesite" id="note_0" dir="100">
<div class="percent">div>
<div id="slice" class="gt50">
<div class="pie fill">
div>
div>
div><span class="skill">HTMLspan>
li>
ul>
div>
section>
div>
body>
html>补充下，如果还要加上进度的话：
<div class="percent"><span class="int">0span>div>然在加段js
$(document).ready(function() {
/* timerSeconds = 10;
timerFinish = new Date().getTime() + (timerSeconds * 1000);
$('.notesite').each(function(id) {
note = $('#note_' + id).attr('dir');
timer = setInterval('stopNote(' + id + ', ' + note + ')', 0);
});*/
count(0);
function count(num){
var dir = $('#note_0').attr("dir");
$(".int").html(num);
if(++num<=dir){
setTimeout(function(){count(num)},10);//1秒是1000，这里要跟上面动画设置时间一样，2秒就是2000，除以100那就是20了。。。。
}
}
});