動的な幅のグラデーショングラデーションを固定

Question

私はゲーム中の兵士のためにHPバーを作ろうとしています。

バーの幅は50px、高さは10px（初期化時）である必要があります。

それは次のようにする必要があります：

幅はHPが減少するにつれて減少します。

問題は、私は背景が、私は滞在するだけで赤い色をしたい時に幅リーチ10pxのように、幅の変化として例えばその勾配を維持したいということです。

は、いずれかがあります方法は、CSSを使用して行うには？

注：私はバーの絶対位置を使用しています。大きな親divの子です。 注2：すべての要素の幅と高さのパーセンテージ値を使用しています。これらの絶対値は、幅が1366、高さが670の文書の場合の値です。

スニペット：

function changeWidth() 
 
{ 
 
    $("#hp").css("width","10%"); 
 
} 
 

 
function reset() 
 
{ 
 
    $("#hp").css("width","30%"); 
 
}

#cont {width:170px; height:170px; background:#000; position:relative} 
 
#hp { 
 
\t position: absolute; 
 
\t bottom: 5%; 
 
\t width: 30%; 
 
\t height: 10px; 
 
\t background: linear-gradient(to left, #C7D9F8 60%, red); 
 
\t left: 5%; 
 
\t transition: all 1s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
 
<div id="cont"> 
 
    <div id="hp"></div> 
 
</div> 
 

 
<button onclick="changeWidth()"> Run</button> 
 
<button onclick="reset()"> Reset</button>

Answer 1

私はあなたのスニペットを取られ、絶対ピクセル値の勾配であなたの％値を交換しました。また、グラデーションを反転させて、左から右へ、赤から他の色へと移動します。バーの幅を変更すると、赤はまだ表示されたままであることを確認できます。

background: linear-gradient(to right, red, #C7D9F8 30px);

以下の全スニペット：

function changeWidth() 
 
{ 
 
    $("#hp").css("width","10%"); 
 
} 
 

 
function reset() 
 
{ 
 
    $("#hp").css("width","30%"); 
 
}

#cont {width:170px; height:170px; background:#000; position:relative} 
 
#hp { 
 
\t position: absolute; 
 
\t bottom: 5%; 
 
\t width: 30%; 
 
\t height: 10px; 
 
\t background: linear-gradient(to right, red, #C7D9F8 30px); 
 
\t left: 5%; 
 
\t transition: all 1s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
 
<div id="cont"> 
 
    <div id="hp"></div> 
 
</div> 
 

 
<button onclick="changeWidth()"> Run</button> 
 
<button onclick="reset()"> Reset</button>

Answer 2

あなたはlinear-gradientバックグラウンドで絶対値を使用することができます。たとえば、background:linear-gradient(90deg, red 10px, blue 20px);は、要素の幅に関係なく、要素の左側から10pxと20pxの間で赤から青までの勾配を与えます。

これは、meterタグを使用してバーの色を変更するために使用できるもう1つの方法と一緒に、このフィーディングに含めました。

https://jsfiddle.net/jcwjptu8/