如何动画填充html元素

Question

所以我遇到的问题是我想要动画填充一个圆圈html元素。圆圈开始灰色，用户将提供一个数字，并且圆圈将通过让另一个蓝色圆圈填充用户指定的原始圆圈的百分比来改变颜色。我无法弄清楚如何动画或创建填充蓝色圆圈。

HTML

<div class="circle circle-outer-border"> 
    <div class="circle circle-background"> 
     <div class="circle circle-fill"></div> 
    </div> 
</div> 

CSS

.circle{ 
    height: 200px; 
    width: 200px; 
    -moz-border-radius: 100px; 
    -webkit-border-radius: 100px; 
} 

.circle-outer-border{ 
    border: 1px solid black; 
} 

.circle-background{ 
    border: 20px solid #b1b1b1; 
    background-color: transparent; 
    margin-left: -1px; margin-top: -1px /** to make up for outer-border  margin**/ 
} 

.circle-fill{ 
    border: 20px solid #147fc3; 
    background-color: transparent; 
    margin-left: -21px; margin-top: -21px; 
} 

所以我有3个圈，一个只是黑色边框，一个只显示灰色边框和第三个是第三圈层这是我将动画作为“蓝色填充物”的一个，我将它们堆叠在一起，以赋予其表盘填充效果。再次我不确定如何做动画，有没有办法显示蓝色圆圈的一部分，并不断显示更多，直到它显示整个蓝色圆圈？感谢您的帮助。我正在写一个angularjs应用程序，但尚未编写angularjs代码。

Answer 1

我简化了您的解决方案只是有点。而不是3个DIV，只有2个。

外DIV绘制圆圈，并说“我的孩子不能溢出”。

内部的DIV是一个简单的矩形。他是你的动画人物，从底部开始并上下移动。

正像在船上望向舷窗！

.circle{ 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
.circle-outer-border{ 
 
    position: relative; 
 
    border: 1px solid black; 
 
    border-radius: 100px; 
 
    -moz-border-radius: 100px; 
 
    -webkit-border-radius: 100px; 
 
    overflow: hidden; 
 
} 
 

 
.circle-fill{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #147fc3; 
 
} 
 

 
.animated .circle-fill { 
 
    -webkit-animation: fillerup 5s infinite; 
 
    animation: fillerup 5s infinite; 
 
} 
 
.static .circle-fill { 
 
    top: 150px; 
 
} 
 

 
@-webkit-keyframes fillerup { 
 
    0% { 
 
    top: 200px; 
 
    } 
 
    100% { 
 
    top: 0px; 
 
    } 
 
} 
 
@keyframes fillerup { 
 
    0% { 
 
    top: 200px; 
 
    } 
 
    100% { 
 
    top: 0; 
 
    } 
 
}

<div class="circle circle-outer-border animated"> 
 
    <div class="circle circle-fill"></div> 
 
</div> 
 
<br/> 
 
<div class="circle circle-outer-border static"> 
 
    <div class="circle circle-fill"></div> 
 
</div>

Answer 2

<canvas id="Circle" width="578" height="200"></canvas> 

var canvas = document.getElementById('Circle'); 
 
var context = canvas.getContext('2d'); 
 
var centerX = canvas.width/2; 
 
var centerY = canvas.height/2; 
 
var radius = 80; 
 

 
var full = radius*2; 
 
var amount = 0; 
 
var amountToIncrease = 10; 
 

 
function draw() { 
 
    context.save(); 
 
    context.beginPath(); 
 
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
 
    context.clip(); // Make a clipping region out of this path 
 
    // instead of filling the arc, we fill a variable-sized rectangle 
 
    // that is clipped to the arc 
 
    context.fillStyle = '#13a8a4'; 
 
    // We want the rectangle to get progressively taller starting from the bottom 
 
    // There are two ways to do this: 
 
    // 1. Change the Y value and height every time 
 
    // 2. Using a negative height 
 
    // I'm lazy, so we're going with 2 
 
    context.fillRect(centerX - radius, centerY + radius, radius * 2, -amount); 
 
    context.restore(); // reset clipping region 
 

 
    context.beginPath(); 
 
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
 
    context.lineWidth = 10; 
 
    context.strokeStyle = '#000000'; 
 
    context.stroke(); 
 
    
 
    // Every time, raise amount by some value: 
 
    amount += amountToIncrease; 
 
    if (amount > full) amount = 0; // restart 
 
} 
 

 
draw(); 
 
// Every second we'll fill more; 
 
setInterval(draw, 1000);

来源：https://stackoverflow.com/a/16862746/563532