css3圆环旋转效果动画怎么做

html结构：

<div id="progress">
      <span></span>
</div>

css样式：

#progress{
            width: 50%;
            height: 30px;
            border:1px solid #ccc;
            border-radius: 15px;
            margin: 50px 0 0 100px;
            overflow: hidden;
            box-shadow: 0 0 5px 0px #ddd inset;
        }
        #progress span {
            display: inline-block;
            width: 100%;
            height: 100%;
            background: #2989d8; / Old browsers /
            background: -moz-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); / FF36+ /
            background: -webkit-gradient(linear, left bottom, right top, color-stop(33%,#2989d8), color-stop(34%,#7db9e8), color-stop(59%,#7db9e8), color-stop(60%,#2989d8)); / Chrome,Safari4+ /
            background: -webkit-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); / Chrome10+,Safari51+ /
            background: -o-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); / Opera 1110+ /
            background: -ms-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); / IE10+ /
            background: linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); / W3C /
            filter: progid:DXImageTransformMicrosoftgradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType=1 ); / IE6-9 fallback on horizontal gradient /
            background-size: 60px 30px;
            text-align: center;
            color:#fff;
            -webkit-animation:load 3s ease-in;
        }
        @-webkit-keyframes load{
            0%{
                width: 0%;
            }
            100%{
                width:100%;
            }
        }

可以看到其实这种进度条的动画是最容易实现的，根据具体进度百分比设置默认的width百分比和动画里100%处的width百分比就行了，比如说，我想实现70%的进度条动画效果，那么我只需要修改一下两处地方：

#progress span{
    width: 70%;
}
@-webkit-keyframes load{
      0%{
        width: 0%;
      }
    100%{
        width:70%;
      }
}

这个要用css3，ie要用滤镜，举例顺时针旋转90度
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
filter:progid:DXImageTransformMicrosoftBasicImage(rotation=1);
上面代码前三行是css3，第四行是ie滤镜的简单的90度的整数倍旋转方式，更加复杂的度数要用矩阵，需要的话可以查查资料
注：左旋把90改为-90，rotation=1改为rotation=3
注：如果你的层上还有文字什么的，也会被旋转，所以有文字的话，和背景图放在不同的层上，旋转有背景图的层

1、我们用两个相同的div编辑它，这是基本的div代码。

2、这是一个没有旋转的div。然后我们只设置灰蓝色div的旋转，以便我们确切地知道旋转中心点是什么。

3、设置灰蓝色div是使用t类名，然后使用变换，然后旋转。注意角度是deg，这里我们设置旋转45度。

4、然后查看对比度，灰色蓝色div已旋转，旋转的中心点默认为div的中心。

5、如果我们想设置旋转的中心点，我们可以使用transform-origin属性。将旋转中心设置为左上角，这意味着左上角是旋转中心。

6、此时，旋转中心已经改变，它已经变为左上角。效果如下。

---