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>

但是我不确定所有浏览器是否已经完全支持此功能。

动态更改条形颜色

1 个答案: