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>

活动边框将替换为当前百分比。在此示例中，预跨度将包含文本百分比以及所需的总度数（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);
    }
}

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

2 个答案: