用css动画旋转圆圈（百分比）

Question

我如何制作以下网站http://www.awwwards.com/ 上的旋转圆圈

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

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

这几乎是我所知道的关于过渡的全部内容，但我想它已经足够了。但是，我必须在过渡开始之前切掉我的蛋糕“馅饼”，对吧？

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

Answer 1

您可以阅读这篇文章并查看一个工作示例，甚至了解它的工作原理css-pie-timer

更新

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

主要思想是了解如何绘制圆形扇区，然后开始绘制度数 = 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 span 将包含文本百分比以及您想要的总度数 (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); 
}

这是一个working demo

注意 它适用于 firefox 和 chrome。您必须为 linear-gradient 添加 IE 支持。

Answer 2

我喜欢 Itay Gal 的回答，因为它很简单，只使用 CSS 和 Javascript。

我能够进一步简化它，并使它更像一个真实世界的示例，以便它在函数被调用时运行（在启动时或当你调用它时）。只需传入您希望它停止的百分比数字。

适用于所有现代浏览器，包括 IE10+。在旧版浏览器中优雅降级。

JSFiddle 演示：https://jsfiddle.net/ggj55sqo/

HTML

<div id="sellPerCirc" class="perCirc">
    <div class="perCircInner">
        <div class="perCircStat">0%</div><div>Complete</div>
    </div>
</div>

CSS

.perCirc {
    position: relative;
    text-align: center;
    width: 110px;
    height: 110px;
    border-radius: 100%;
    background-color: #00cc00;
    background-image: linear-gradient(91deg, transparent 50%, #ccc 50%), linear-gradient(90deg, #ccc 50%, transparent 50%);
}
.perCirc .perCircInner {
    position: relative;
    top: 10px;
    left: 10px;
    text-align: center;
    width: 90px;
    height: 90px;
    border-radius: 100%;
    background-color: #eee;
}
.perCirc .perCircInner div {
    position: relative;
    top: 22px;
    color:#777;
}
.perCirc .perCircStat {
    font-size: 30px;
    line-height:1em;
}

JQuery

// change the value below from 80 to whichever percentage you want it to stop at.
perCirc($('#sellPerCirc'), 80);

function perCirc($el, end, i) {
    if (end < 0)
        end = 0;
    else if (end > 100)
        end = 100;
    if (typeof i === 'undefined')
        i = 0;
    var curr = (100 * i) / 360;
    $el.find(".perCircStat").html(Math.round(curr) + "%");
    if (i <= 180) {
        $el.css('background-image', 'linear-gradient(' + (90 + i) + 'deg, transparent 50%, #ccc 50%),linear-gradient(90deg, #ccc 50%, transparent 50%)');
    } else {
        $el.css('background-image', 'linear-gradient(' + (i - 90) + 'deg, transparent 50%, #00cc00 50%),linear-gradient(90deg, #ccc 50%, transparent 50%)');
    }
    if (curr < end) {
        setTimeout(function () {
            perCirc($el, end, ++i);
        }, 1);
    }
}