使用CSS制作旋转圆圈动画（百分比）

我怎样才能制作以下网站上的旋转圆圈http://www.awwwwards.com/

对于我的网站，我不需要它是动态的。至少这次不是。我已经尝试了不同的解决方案，包括 Javascript 和 CSS，但我不确定创建此解决方案的最佳方法是什么。

-moz-transform: rotate(270);
-webkit-transform: rotate(270);
-o-transform:rotate(270deg);
transform: rotate(270deg);
transition: all 2s;

这几乎是我对过渡的了解，但我想这已经足够了。然而，我必须在过渡开始之前把我的“蛋糕”切掉，对吗？

有人知道我应该从哪里开始吗？

您可以阅读这篇文章并查看一个工作示例，甚至了解它是如何工作的CSS 饼图计时器

UPDATE

我不喜欢这个解决方案，所以我尝试自己实现它，并在一点帮助下（我在这里问了几个问题），我设法做得非常优雅。

主要思想是了解如何绘制圆扇形，然后开始绘制度数 = 0 的截面，直到达到所需的度数。

我还把它变成了可逆的，只是为了好玩:)。

HTML

<div class="container">
    <div id="activeBorder" class="active-border">
        <div id="circle" class="circle">
            <span class="prec 270" id="prec">0%</span>
        </div>
    </div>
</div>

活动边框将替换为当前百分比。在本例中，prec 范围将包含文本百分比以及您想要的总度数 (270)。当我实现它时，百分比需要是第二类。

CSS

这是棘手的部分。这是棘手的部分。我这样画扇区：

.active-border{
    position: relative;
    text-align: center;
    width: 110px;
    height: 110px;
    border-radius: 100%;
    background-color:#39B4CC;
    background-image:
        linear-gradient(91deg, transparent 50%, #A2ECFB 50%),
        linear-gradient(90deg, #A2ECFB 50%, transparent 50%);
}

解释： 第一个linear-gradient值将是显示的度数 + 90。 如果度数大于 180，我们将设置第一个linear-gradient颜色为我们的活动颜色。

JQuery

function loopit(dir){
    // choose direction
    if (dir == "c")
        i++
    else
        i--;
    // stop condition
    if (i < 0)
        i = 0;
    if (i > degs)
        i = degs;

    // calculate and set the percentage text
    prec = (100*i)/360;   
    $(".prec").html(Math.round(prec)+"%");

    if (i<=180){
        activeBorder.css('background-image','linear-gradient(' + (90+i) + 'deg, transparent 50%, #A2ECFB 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
    }
    else{
        activeBorder.css('background-image','linear-gradient(' + (i-90) + 'deg, transparent 50%, #39B4CC 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
    }

    // recursive call 
    setTimeout(function(){
        if($("#circle").is(":hover"))
           loopit("c");
        else
           loopit("nc");
    },1); 
}

这是一个工作演示

Note它适用于 Firefox 和 Chrome。您必须添加 IE 支持linear-gradient.