festen Hintergrund Farbverlauf mit dynamischer Breite

Question

Ich versuche, HP Bar für einen Soldaten in einem Spiel zu tun.

Der Balken sollte 50px Breite und 10px für Höhe (bei Initialisierung) sein.

sollte es so aussehen:

die Breite wie die HP Abnahme abnehmen wird.

das Problem ist, dass ich den Hintergrund wollen ihre Steigung als die Breitenänderung erhalten, wie wenn die Breite Reichweite 10px ich möchte nur die rote Farbe zu bleiben, zB:

gibt es eine Möglichkeit, das mit CSS zu tun?

Hinweis: Ich verwende absolute Position für die Bar, und es ist ein Kind von einem großen Elternteil Div. Hinweis 2: Ich verwende Prozentwert für Breite und Höhe für das gesamte Element, legen Sie diesen absoluten Wert ist, was für ein Dokument mit 1366 Breite und 670 Höhe sein sollte.

Snippet:

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

Ich habe Ihren Schnipsel genommen und Ihr% Werte auf dem Gradienten mit einem absoluten Pixelwert ersetzt. Ich habe auch den Gradienten invertiert, so dass es von links nach rechts geht, von Rot zu der anderen Farbe. Sie können überprüfen, ob das Rot weiterhin sichtbar bleibt, wenn Sie die Breite des Balkens ändern.

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

Voll Schnipsel unten:

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

Sie absolute Werte in einem linear-gradient Hintergrund verwenden können. Zum Beispiel gibt background:linear-gradient(90deg, red 10px, blue 20px); einen Farbverlauf von Rot nach Blau zwischen 10px und 20px von der linken Seite des Elements unabhängig von der Breite des Elements.

Ich habe dies in eine Fiedel unten eingefügt, zusammen mit einem anderen Ansatz, den Sie verwenden könnten, um die Farbe des Balkens mit dem meter Tag zu ändern.

https://jsfiddle.net/jcwjptu8/