动态改变条形颜色

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 class。您通过 var(--NameOfYourVar) 在 css 中定义您的自定义变量。在您的 html 部分中，您可以使用样式属性将值传递给您的变量。

.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>

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

动态改变条形颜色

change bar color dynamically

html

javascript

css

css-transitions