CSS infinity边界状态改变进度条样式实例页面

效果：

//zxx: 超过80%颜色变绿

代码：

CSS代码：

.bar {
    width: 240px;
    height: 18px;
    border: 1px solid;
    color: hwb(min(calc((var(--percent) - 80) * infinity), 150) 0% 25%);
}
.bar::before {
    display: block;
    line-height: 18px;
    counter-reset: progress var(--percent);
    content: counter(progress) '%\2002';
    width: calc(1% * var(--percent));
    -webkit-text-fill-color: #fff;
    background-color: currentColor;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
}

HTML代码：

<div class="bar" style="--percent: 40;"></div> 
<br>
<div class="bar" style="--percent: 81;"></div>