html旋转圆圈动画效果,html – 使用css动画旋转圆(百分比)

您可以阅读这篇文章并查看一个工作示例,甚至了解它是如何工作的

css-pie-timer

UPDATE

我不喜欢那个解决方案,所以我试着用自己的方式实现它并提供一点帮助(我在这里问了几个问题)我设法做得非常优雅.

主要思想是了解如何绘制圆形扇区,然后开始绘制程度为0的部分,直到达到所需的程度.

我也让它变得可逆,只是为了好玩:).

HTML

0%

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

}

说明：第一个线性渐变值将是90所示的度数.

如果度数大于180,我们将第一个线性渐变颜色设置为活动颜色.

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%)');

}

else{

activeBorder.css('background-image','linear-gradient(' + (i-90) + 'deg,#39B4CC 50%),transparent 50%)');

}

// recursive call

setTimeout(function(){

if($("#circle").is(":hover"))

loopit("c");

else

loopit("nc");

},1);

}

注意它适用于firefox和chrome.您必须为线性渐变添加IE支持.