动画旋转圆（百分比）与css [英] Animate spinning circle(percentage) with css
问题描述
如何制作位于以下网站上的旋转圈子 http://www.awwwards.com/
对于我的网站，我不需要它是动态的。至少不是这个时候。我尝试了不同的解决方案，与JavaScript和CSS，但我不知道什么是最好的方法来创建这个。
-moz-transform：rotate（270）;
-webkit-transform：rotate（270）;
-o-transform：rotate（270deg）;
transform：rotate（270deg）;
transition：all 2s;
这是几乎所有我知道的转换，但我猜它够了。
任何人都知道我应该从哪里开始？
您可以阅读这篇文章，看看一个工作示例，甚至了解它的工作原理 css-pie-timer
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 <0）
i = 0;
if（i> degs）
i = degs;
//计算并设置百分比文本
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％），线性梯度（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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
