动态更改条形图颜色

Question

问题说明：

我想创建一个栏，它将根据我提供的数字更改颜色。酒吧会随着过渡而上下浮动。例如：如果数字是80：悬停条将从红色开始，在50左右，它将变成浅红色，当它达到80时，它将几乎变成绿色。

根据我的代码，我可以通过修改白色的百分比来实现这一点。我可以通过任何方式将数字发送到css，以便线性渐变属性拾取它。

这是我的代码：

.container{
border: 4px solid black;
width: 40px;
height: 600px;
background-size: 100% 200%;
background-image: linear-gradient(white 50%,green 50%,red);
transition: background-position 1s ease-in-out;
}
.container:hover{
background-position: 0 100%;
}

<div class="container">
</div>

Answer 1

可以将变量值直接传递到css类中。您可以通过var(--NameOfYourVar)在css中定义自定义变量。在html部分中，可以使用style属性将值传递给变量。

.container{
border: 4px solid black;
width: 40px;
height: 600px;
background-size: 100% 200%;
background-image: linear-gradient(white var(--myVar),green 50%,red);
transition: background-position 1s ease-in-out;
}
.container:hover{
background-position: 0 100%;
}

<div class="container" style="--myVar: 80%;">
</div>

但我不确定这是否已经被所有浏览器完全支持。