动画旋转圆（百分比）与css

问题描述

如何制作位于以下网站上的旋转圈子

对于我的网站，我不需要它是动态的。至少不是这个时候。我尝试了不同的解决方案，与JavaScript和CSS，但我不知道什么是最好的方法来创建这个。

  -moz-transform：rotate（270）; 
 -webkit-transform：rotate（270）; 
 -o-transform：rotate（270deg）; 
 transform：rotate（270deg）; 
 transition：all 2s; 
  

这是几乎所有我知道的转换，但我猜它够了。

任何人都知道我应该从哪里开始？

解决方案

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

UPDATE

我不喜欢这个解决方案，所以我试图实现它的自我和一点帮助（我在这里问几个问题）我设法做得很漂亮。

主要想法是了解如何绘制一个圆形扇区，然后开始绘制部分，度为0，直到达到您想要的程度。

也使它可逆，只是为了乐趣:)。

HTML

 < div class =container> 
< div id =activeBorderclass =active-border> 
< div id =circleclass =circle> 
< span class =prec 270id =prec> 0％< / span> 
< / div> 
< / div> 
< / div> 
  

活动边框将替换为当前百分比。在此示例中，预跨度将包含文本百分比以及所需的总度数（270）。

$ b b p>这是棘手的部分。这是棘手的部分。我以这种方式绘制部门：

  .active-border {
 position：relative; 
 text-align：center; 
 width：110px; 
 height：110px; 
 border-radius：100％; 
 background-color：＃39B4CC; 
 background-image：
线性渐变（91deg，透明50％，＃A2ECFB 50％），
线性渐变（90deg，＃A2ECFB 50％，透明50％ 
} 
  

说明：第一个 linear-gradient 值将是所示的度数+90。
如果度数大于180，我们将设置第一个 linear-gradient

 函数loopit（dir）{
 //选择方向
 if（dir ==c）
 i ++ 
 else 
 i-- 
 //停止条件
 if（i  i = 0; 
 if（i> degs）
 i = degs; 
 
 //计算并设置百分比文本
 prec =（100 * i）/ 360; 
 $（。prec）。html（Math.round（prec）+％）; 
 
 if（i  activeBorder.css（'background-image'，'linear-gradient（'+（90 + i）+'deg，transparent 50％ ＃A2ECFB 50％），线性梯度（90deg，＃A2ECFB 50％，透明50％）'）; 
} 
 else {
 activeBorder.css（'background-image'，'linear-gradient（'+（i-90）+'deg，transparent 50％，＃39B4CC 50％ ，线性梯度（90deg，＃A2ECFB 50％，透明50％）'）; 
} 
 
 //递归调用
 setTimeout（function（）{
 if（$（＃circle）。is（：hover））
 loopit（c）; 
 else 
 loopit（nc）; 
}，1）; 
} 
  

这里是

注意适用于Firefox和Chrome。您必须为 linear-gradient 添加IE支持。

How can i make the spinning circles which is on the following site http://www.awwwards.com/

For my site i don't need it to be dynamic. At least not this time. I have tried out different solutions, with both Javascript and CSS, but i'm not sure what is the best method to create this.

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

This is pretty much all i know about transitions, but i guess its enough. However, i would have to have my "pie" of the cake cut out before the transition start, right?

Anyone know where i should start?

解决方案

You can read this article and see a working example and even understand how it works css-pie-timer

UPDATE

I didn't like that solution so I tried to implement it my self and with a little help (I asked few questions here) I manage to do it pretty elegant.

The main idea is to understand how to draw a circle sector and then start drawing section with degree = 0 until you reach degree you want.

I also made it reversible, just for fun :).

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>

The active border will be replaced with the current percentage. The prec span will contains the textual percentage and also the total degrees you want (270) in this example. As I implemented it, the percentage needs to be the second class.

CSS

This is the tricky part. This is the tricky part. I draw the sector this way:

.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%);
}

Explanation: the first linear-gradient value will be the degrees shown + 90.If the degrees is bigger than 180 we'll set the first linear-gradient color to our active color.

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);
}

And here's a working demo

Note It works for firefox and chrome. You'll have to add IE support for linear-gradient.

这篇关于动画旋转圆（百分比）与css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！