html要素の塗りつぶし方法

Question

したがって、問題は円のhtml要素の塗りをアニメーション化しようとしていることです。円は灰色で始まり、ユーザーは数字を入力し、別の青い円でユーザーが指定した元の円の割合まで塗りつぶして色を変えます。私は、青い円の塗りつぶしをどのようにアニメーション化するか、または作成するかを考え出すのに問題があります。だから3円、ちょうど黒のボーダーのための1つ、ただ灰色境界及び第三円である第三のいずれかを示すものを

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

を有します私は "青い塗りつぶし"の役割を果たすためにアニメーション化するものです。私はダイヤルの充填の効果を与えるために、それらを重ね合わせて積み重ねました。繰り返しますが、アニメーションを行う方法がわかりません。青い円の一部を表示し、青い円を表示するまで続きを表示する方法はありますか？お手伝いありがとう。私はこれをanglejsアプリに書いていますが、まだ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